IOS原生和 React-Native 混合开发（上）

IOS原生项目集成RN

步骤一：
新建IOS项目RNIOS，

步骤二：
1.在项目目录中新建node_modules 文件夹，
2.创建一个package.json或者直接从别的react-native项目中复制过来

package.jason.png

步骤三：安装react-native模块
在终端cd到项目目录，然后执行npm install

屏幕快照 2018-02-06 下午4.31.16.png

步骤四：导入react-native框架

1. 在项目目录下新建Librarys 文件夹，从安装好的node_modules中 拉对应的库到Librarys中

   
   
   

   image.png
   
   
   

   image.png
   
   

   最终结果：

   
   
   

   屏幕快照 2018-02-06 下午4.42.20.png
   
   2.Link Binary With Libraries中添加.a库 ，记得删除tvOS，还要在添加libstdc++.tbd和libz.1.1.3.tbd
   
   

   屏幕快照 2018-02-06 下午4.45.12.png

3.在Edit Scheme的Build中添加React
1.向Edit Scheme的Build中添加React,并拖拽到最上位置,并取消勾选Parallelize Build选项。这一步很关键,因为项目需要先编译React.a文件。

image.png

image.png

步骤五：配置路径
1.Build Settings的Other Linker Flags设置为 -ObjC
2.Header Search Paths设置为/react-native/React路径，并设置为 recursive。

image.png

步骤六：创建index.ios.js文件 放在和node_modules在统一级
AppDelegate 中添加以下加载代码：

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"RNIOS"
                                                 initialProperties:nil
                                                     launchOptions:nil];
    rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
    
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.rootViewController = [[UIViewController alloc] init];
    self.window.rootViewController.view = rootView;
    
    [self.window makeKeyAndVisible];
    return YES;
}

步骤七：使用了HTTPS协议进行传输
在info.plist文件中添加一个字典类型的key为App Transport Security

步骤八：运行xcode 查看结果

最后给大家推荐个不错的公众号 "说神码"，或者大家可以扫描下面的二维码关注

qrcode_for_gh_3b0177133bdb_258.jpg