使用CocoaPods 将 React Native 导入已有的项目中

前提条件是，电脑上已经安装了CocoaPods，React Native相关环境。
1.先用pod search React 命令 寻找React，看看约束有哪些以及导入语句

 2.在podfile这样编辑

platform :ios, '7.0'
use_frameworks!

target ’Cocoapod导入ReactNative’ do //Cocoapod导入ReactNative 是所需要导入的项目名称，这个是我的醒目名称：ocoapod导入ReactNative
 pod 'React', '~> 0.13.0-rc'
 pod 'React/ART' 
 pod 'React/RCTActionSheet' 
 pod 'React/RCTAdSupport' 
 pod 'React/RCTGeolocation' 
 pod 'React/RCTImage' 
 pod 'React/RCTNetwork' 
 pod 'React/RCTPushNotification' 
 pod 'React/RCTSettings' 
 pod 'React/RCTText' 
 pod 'React/RCTVibration' 
 pod 'React/RCTWebSocket' 
end

3.找到项目，在终端先写入cd,然后拖动项目到终端自动生成路径，转到podfile所在的目录,然后 使用pod install 命令安装
4.安装之后，找到图中标志的应用，打开应用，先按command+B编译一下，看看是否导入成功，没报错就是成功，异常不管

 5.设置Search Paths，输入 $(PODS_ROOT)/React/React， 选择recursive，如图

 在编译一下，没报错就是路径对了
6.创建一个，index.ios.js文件，创建过程如图

 

 内容编辑如下:

'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, Text, View, } = React; var same1 = React.createClass({ render: function() { return ( 欢迎光临! 这是第一次开始 你们好 ); } }); var 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('start1', () => same1);//same1与class 后面的名称一致

在ViewController.m编辑以下代码

#import "ViewController.h" #import @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; [self initRNView]; // Do any additional setup after loading the view, typically from a nib. } -(void)initRNView { NSURL *jsCodeLocation; jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];//index.ios.bundle的index.ios 是文件名称 RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"start1" initialProperties:nil launchOptions:nil]; //注意，moduleName名称与('start1', () => same1)的start1一致 rootView.frame = CGRectMake(0, 64, 300, 300); [self.view addSubview:rootView]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end

7.启动服务器，找到项目，在终端先写入cd,然后拖动项目到终端，自动产生路径，转到指定的路径之后再使用 

(cd Pods/React; npm run start)

命令启动

8.开启网络并运行项目，如图

 

9.再创建一个新的new.js文件，将index.ios.js内容复制过来并修改，修改部分如下描述
将 这是第一次开始改为这是第二次开始,same1改为same2

var same2 = React.createClass({ render: function() { return ( 欢迎光临! 这是第二次开始 你们好 ); } });

start1改为start2

AppRegistry.registerComponent('start2', () => same2);

在ViewController.m修改部分

 

-(void)initRNView {
    NSURL *jsCodeLocation;
//    jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];//index.ios.bundle的index.ios 是文件名称
   
 jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/new.bundle?platform=ios&dev=true"];

//    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
//                                                        moduleName:@"start1"
//                                                 initialProperties:nil
//                                                     launchOptions:nil];
//    //注意，moduleName名称与('start1', () => same1)的start1一致
    
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"start2"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    rootView.frame = CGRectMake(0, 64, 300, 300);
    [self.view addSubview:rootView];
}

运行结果如图

 最后，如果运行错误的原因：
1.cocoapods 没导入成功;
2.没设置link路径;
3.没有开启项目的网路
4.js文件路径存放与指定的文件存放路径不一致
5.就是js文件 class 后面的名称与 （）=>（这是箭头函数） 访问的名称不一致
6.就是文件名称与URL的/.bundle?点前面的名称不一致
7.moduleName 的名称与 ‘’,（）=> （箭头函数）前面的''里面的名称不一致