(十九)在现有项目中集成ReactNaitve

本文大纲 ： 

       1. 集成纯ReactNative  的项目

       2. 在现有项目中手动集成ReactNative 

       3. 在现有项目中 使用CocoaPod 集成ReactNative 

1.集成纯ReactNative  的项目

     react-native init test

2. 在现有项目中手动集成ReactNative 

创建一个ReactNative项目，目的是获取最新的React Native包。(项目名是：test)

        react-native init test

将test/node_modules拷贝到ReactTest根目录下
在ReactTest项目中创建Group：Libraries



创建文件：Libraries
在Group：Libraries中添加依赖的React Native项目。(不同的项目所添加的依赖库不同，需要开发者自己甄别)


添加项目的依赖
具体的添加方式是：Libraries上右键--> addFiles to "项目名"，选择目录：
node_modules/react-native/React/React.xcodeproj或者
node_modules/react-native/Libraries/Text/RCTText.xcodeproj
其他类似。
将依赖库链接到项目依赖库中。



添加到依赖库
在项目的搜索路径中添加：
$(SRCROOT)/node_modules/react-native/React



添加搜索路径
设置Other Linker Flag, 添加：-ObjC -lc++



设置other linker flag

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

if(!self.window){

self.window = [[UIWindow alloc]init];

}

self.window.frame = [[UIScreen mainScreen]bounds];

self.window.backgroundColor = [UIColor whiteColor];

self.window.rootViewController = [ViewController new];

[self.window makeKeyAndVisible];

return
YES;

}

- (void)viewDidLoad {

[super viewDidLoad];

UIButton *searchBtn = [[UIButton alloc]init];

searchBtn.frame =CGRectMake(0 +5,0,
100, 100);

searchBtn.backgroundColor = [UIColor colorWithRed:0.000 green:0.569 blue:1.000
alpha:1];

[searchBtn setTitle:@"搜索" forState:UIControlStateNormal];

[searchBtn setTitle:@"搜索" forState:UIControlStateHighlighted];

NSURL *jsCodeLocation;

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

RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation

moduleName:@"Study"

initialProperties:nil

launchOptions:nil];

rootView.frame = [[UIScreen mainScreen]bounds];

[self.view addSubview:rootView];

[self.view addSubview:searchBtn];

}

添加package.json， index.ios.js
把test项目目录下面的package.json， index.ios.js拷贝一份到ReactTest项目根目录中一份。



拷贝package.json， index.ios.js

command R

index.ios.js 中

AppRegistry.registerComponent('Study',() => ReactTest);

jsCodeLocation = [NSURL URLWithString:@"http://192.168.1.102:8081/index.ios.bundle?pla

 在现有项目中 使用CocoaPod 集成ReactNative
step 1.在项目中加入Cocoapods

项目工程根目录下pod initpod install

step 2.安装react-native

mkdir react

cd react

文件

{

"name":
"RCTTest",

"version":
"0.0.1",

"private":
true,

"dependencies":
{ "react": "^0.14.8", "react-native":"^0.22.2"}

}

npm install

'use strict';

var React =
require('react-native');

var { Text, View} = React;var styles = React.StyleSheet.create({ container: { flex:1, backgroundColor:'red'
}});// 我们创建一个模块A

classModuleAextendsReact.Component{

render() {

return (

<Viewstyle={styles.container}><Text>This
is a simple application.</Text></View> )

<Text>This is a simple application.</Text>

</View>

)

}

}

React.AppRegistry.registerComponent('ModuleA', () => ModuleA);

step 3.使用Cocoapods集成react-native

pod 'React', :path =>
'./react/node_modules/react-native', :subspecs => [

'Core',

'RCTNetwork',

'RCTText',

'RCTWebSocket',

# 添加其他你想在工程中使用的依赖。

]

更新pod

pod update

step 4.run run run

react-native start

打开工程中的 Info.list 文件，添加下面配置即可：

<key>NSAppTransportSecurity</key>

<dict>

<key>NSExceptionDomains</key>

<dict>

<key>localhost</key>

<dict>

<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>

<true/>

</dict>

</dict>

</dict>

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

NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];

RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"ModuleA" initialProperties:nil launchOptions:nil];

[self.view addSubview:rootView];rootView.frame =CGRectMake(0,20,300,
300);

      react-native  init  awesome 

     首先我们创建一个iOS项目作为已有项目。(我创建的项目名是：ReactTest)
修改代码AppDelegate.m

修改ViewController.m

  运行

在Xcode中

如果运行出错，请查看下一节中是否有解决方法。

错误信息处理

error1: Invariant Violation:Application 项目名 has not been registered.

这个错误的原因是index.ios.js 中的注册名，和代码中的引用名不同；

ios 代码中引用

Cocoapods是iOS中目前公认的最便捷，合理的第三方框架管理工具，具体的网上很多相关的文章，一搜就可以了。

先创建一个文件夹用来存放react-native

进入创建的react文件中

创建

package.json

在react文件夹中安装react-native

创建

index.ios.js

文件

在

Podfile

中添加React

注意：

./react

/node_modules/react-native这个react是和你开始创建的存放RCT的目录是相同的。记得要添加所有你需要的依赖！举例来说， 元素如果不添加RCTText依赖就不能运行。

到这里，配置工作就基本完成了，接下来跑起来试一下

先进入开始安装RCT的目录中，开启服务

在iOS 9以上的系统中，除非明确指明，否则应用无法通过http协议连接到localhost主机。 我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。 如果不这样做，在尝试通过http连接到服务器时，会遭遇这个错误 - Could not connect to development server.

做完配置，就可以开始写代码了