抑或先介绍怎么把React,根目录新建rn-cli.config.js文件 内容为

关于React Native的详实介绍我就不叙述了,他是应用js构建原生app的开支框架。两遍变编码多平台运行,相当有力。不过个人不喜欢js的超负荷灵活(弱类型)的语法。强大的强类型语言Typescript(简称TS)是自我的首选,他可以编译成JavaScript,编译成的JavaScript代码可读性很好,但是这不是首要,关键是TS支出和调试效用极高。
但是React Native合法是采用js的开销的,尽管要是采取TS开发React
Native的紧如果transformer
eact-native结合的显假使采纳转换器

想了很久,要先介绍各个零件的骨子里运用好,依旧先介绍怎么把React
Native集成到原生项目好。
因为想起,一旦起首写各种零件的利用,就会花很长很长的篇幅,会把这一个挺首要的始末抛到好远,而集成到原生项目又是不少人所急需上学的(像本人同一哈,直接代表现有的档次是不科学的,作为一个模块集合进去才相比实际),所以决定了,如故先花三个篇章写写怎么将React
Native集成到原生项目以及JS与原生之间简单的交互。

初阶化项目

react-native init YahuiApp
cd YahuiApp
yarn add –dev react-native-typescript-transformer typescript
@types/react @types/react-native


用vscode打开 添加配置文件

鉴于React并不曾如若你此外部分的技巧栈——它平时只看做MVC模型中的V存在——它也很容易嵌入到一个绝不由React
Native开发的运用当中。实际上,它可以和大面积的重重工具结合,譬如CocoaPods。

配置Typescript

新建文件 tsconfig.json内容为

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es2015",
        "moduleResolution": "node",
        "jsx": "react-native",
        "noImplicitAny": true,
        "experimentalDecorators": true,
        "preserveConstEnums": true,
        "sourceMap": true,
        "watch": true,
        "allowSyntheticDefaultImports": true
    },
    "filesGlob": [
        "src/**/*.ts",
        "src/**/*.tsx"
    ],
    "exclude": [
        "index.android.js",
        "index.ios.js",
        "build",
        "node_modules"
    ]
}

新建文件 tslint.json 内容为

{
    "rules": {
        "class-name": false,
        "comment-format": [
            true,
            "check-space"
        ],
        "indent": [
            true,
            "spaces"
        ],
        "no-duplicate-variable": true,
        "no-eval": true,
        "no-internal-module": true,
        "no-trailing-whitespace": true,
        "no-unsafe-finally": true,
        "no-var-keyword": true,
        "one-line": [
            true,
            "check-open-brace",
            "check-whitespace"
        ],
        "quotemark": [
            true,
            "double"
        ],
        "semicolon": [
            true,
            "always"
        ],
        "triple-equals": [
            true,
            "allow-null-check"
        ],
        "typedef-whitespace": [
            true,
            {
                "call-signature": "nospace",
                "index-signature": "nospace",
                "parameter": "nospace",
                "property-declaration": "nospace",
                "variable-declaration": "nospace"
            }
        ],
        "variable-name": [
            true,
            "ban-keywords"
        ],
        "whitespace": [
            true,
            "check-branch",
            "check-decl",
            "check-operator",
            "check-separator",
            "check-type"
        ]
    }
}

一、准备干活

配置React Native Packager

根目录新建rn-cli.config.js文件 内容为:
module.exports = {
getTransformModulePath() {
return require.resolve(‘react-native-typescript-transformer’);
},
getSourceExts() {
return [ ‘ts’, ‘tsx’ ]
}
};

1. React Native 开支基础环境

其一可以直接参考我写的第二篇著作React Native
环境搭建和创立项目(Mac)
。假使已经按上篇作品操作过,或者说已经在Mac平台已经成功运行过React
Native应用,这自然是曾经有了付出基础环境,可以直接忽略这一步。

1) 安装Node.js
方式一:
安装
nvm(安装向导在这里)。然后运行命令行如下:

nvm install node && nvm alias default node

这将会默认安装新型版本的Node.js并且安装好命令行的环境变量,这样你可以输入node命令来启动Node.js环境。nvm使您可以可以而且安装五个本子的Node.js,并且在这多少个本子之间轻松切换。
方式二:
先安装Homebrew,再利用Homebrew安装Node.js,运行命令行如下:

//安装Home-brew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
//安装Node.js
brew install node

2) 安装React Native的命令行工具(react-native-cli)

npm install -g react-native-cli

编辑代码

在 src文件夹里新建main.tsc文件
代码为:

import React, { Component } from "react";
import {
    StyleSheet,
    Text,
    View
} from "react-native";
interface Props {

}
interface State {

}
export default class App extends Component<Props, State> {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.text}>
                    Welcome to React Native!
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF",
    } as React.ViewStyle,

    text: {
        fontSize: 20,
        textAlign: "center",
        margin: 10,
    } as React.TextStyle,
});

2. 安装CocoaPods

正文只写使用CocoaPods安装React
Native的法门,相比较襄助使用,也比较简单直接。
若如故不想行使CocoaPods,想间接集成的心上人能够参见上边两篇著作:
1)【iOS&Android】RN学习3——集成进现有原生项目

  1. reactnative集成到原生ios项目
    文中的手动集成react-native

即使在此以前曾经设置并拔取过CocoaPods,请忽略这一步(相信即使是iOS开发,一定大多数都接触过了哈)。
若没有设置,则运行命令如下:

gem install  cocoa pods
//权限不够则运行下面一句
sudo gem install cocoapods

AppRegistry

import {
    AppRegistry,
} from 'react-native';
import App from "./src/main";

AppRegistry.registerComponent('YahuiApp', () => App);

从这之后 您的行使TS开发React Native的品种条件搭建好了

二、集成React Native

1. 安装React Native

1)成立ReactComponent文件夹和配置文件

在类型中建一个名为ReactComponent的文书夹,
用于存放大家react-native的相关文书, 再创造一个package.json文件,
用于先导化react-native.(文件夹名字自定义哈)
文件目录结构如下:

文件目录结构1.png

创办package.json文件,文件内容如下:

{
  "name": "NativeRNApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.2.1",
    "react-native": "0.29.2"
  }
}

中间,name为项目名称。dependencies里为react和react-native的版本音讯。
www.888000ff.com,提出选拔react-native init
AwesomeProject新建新品类时会自动创制package.json,直接把公文复制过来,更改name为协调的原生项目名,以管教react、和react-native的版本最新哈。

2)安装React Native依赖包

在ReactComponent目录下运作命令行:

npm install

运作效果如下:

npm install.png

那边很需要耐心,曾经的自己看着毫无反应的控制台就屏弃了n次。
也许静下心去看部动漫回来就会意识它只想成功了。
事实上install不回去的话,假设此前有开创过React
Native项目,把其中的node_modules直接拷贝过来,也是从未问题(个人品味过)。

2. 开立 index.ios.js(js文件输入)

在ReactComponent文件夹里创立index.ios.js文件,作为js文件输入。

目录结构2.png

index.ios.js文件内容如下:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

class NativeRNApp extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

//  项目名要有所对应
AppRegistry.registerComponent('NativeRNApp', () => NativeRNApp);

3. Cocoapods集成React Native

若原项目无使用Cocoapods,则在根目录下创设Podfile。(有则直接抬高pod相关代码)
目录结构如下:

目录结构3.png

Podfile文件内容为(需保证路径对):

platform :ios, “7.0”

# 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径(一定要确保正确~~)。
pod 'React', :path => ‘./ReactComponent/node_modules/react-native', :subspecs => [
 'Core',
  'ART',
  'RCTActionSheet',
  'RCTAdSupport',
  'RCTGeolocation',
  'RCTImage',
  'RCTNetwork',
  'RCTPushNotification',
  'RCTSettings',
  'RCTText',
  'RCTVibration',
  'RCTWebSocket',
  'RCTLinkingIOS',
]
#需要的模块依赖进来便可,这里是为了举例子,列举所有的模块

下一场在根目录执行pod更新命令:

pod install

/*
以下是失败情况的处理
*/
//  pod命令过慢则可尝试下面命令
pod install --verbose --no-repo-update

//  其中无法正常下载pod install的解决方法:
(or更新最新的CocoaPods version: 0.39.0  查看方法 pod --version)
gem sources --remove https://rubygems.org/
gem sources -a 
gem sources -l 

# 注意 taobao 是 https; 
# gem如果版本太老可以更新:sudo gem update --system; 
# 更新pod repo:pod repo update

运作效果:

pod install.png

三、原生项目处理

1. 向对应ViewController 添加RCTRootView

下边的ReactViewController是自身创造的特别放React
Native模块的ViewController,有必要的话也可对RCTRootView举行进一步封装(就不要每便都重新配置一次)。
ReactViewController代码如下:

#import "ReactViewController.h"
#import <RCTRootView.h>

@interface ReactViewController ()

@end

@implementation ReactViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
    NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];

    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                         moduleName:@"NativeRNApp"
                                                  initialProperties:nil
                                                      launchOptions:nil];
    self.view = rootView;
    //  也可addSubview,自定义大小位置
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

项目结构如下:

品种结构.png

2. iOS门类更新App Transport Security

在iOS
9以上的系统中,除非明确指明,否则应用不可能透过http协议连接到localhost主机。
我们提议你在Info.plist文件准将localhost列为App Transport
Security的两样。
假诺不这么做,在品味通过http连接到服务器时,会遭逢这个似是而非 – Could not
connect to development server.

打开工程中的 Info.list 文件,添加下边配置即可:

<key>NSAppTransportSecurity</key>
  <dict>
    <key>NSExceptionDomains</key>
    <dict>
      <key>localhost</key>
      <dict>
       <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
       <true/>
      </dict>
    </dict>
  </dict>

布局效能如下:

App Transport Security配置.png

3. 启动开发服务器

在运行大家的品类事先,我们需要先启动我们的支付服务器。进入
reactnative目录 ,然后命令行启动服务:

react-native start

4. 运行iOS项目

运作成功用应如下:

运转效果.png

可以成功看到下面的界面,这就恭喜集成成功了。从前弄这么些弄了一两天,紧要卡在npm
install不回去那一步,然后pod是不能的。。写个更加详细的课程希望我们能更自在的把React
Native集成到原生项目中哈,有题目欢迎留言哈。

眼前临时把demo打包到祥和的百度云(将来再想方法放到github):
https://pan.baidu.com/s/1hrKnlvm


因为没继续这方面的劳作之所以好久没更新了,可能代码因为rn的更新会有些问题,最好更新下pod的版本,看看官方文档,看到评论里有对应的座谈,出现问题的爱人最好也看看评论哈哈,可能有化解绑法♪───O(≧∇≦)O────♪

已部分成果如下:
1) React Native 简介与入门
2) React Native
环境搭建和成立项目(Mac)

3) React Native 开发之IDE
4) React Native
入门项目与分析

5) React Native
相关JS和React基础

6) React Native
组件生命周期(ES6)

7) React Native
集成到原生项目(iOS)

8) React Native
与原生之间的通信(iOS)

9) React Native
封装原生UI组件(iOS)

相关文章