React-Native 与IOS集成交互

本篇文章记录了在已经创建好的原生项目上集成react-native的过程。

一、创建工程

我在桌面创建了一个工程，命名RNTest。

1_1.png

二、添加package.json文件

在RNTest目录下创建一个package.json或者直接从别的react-native项目中复制过来。

{
    "name": "RNTest",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "~15.4.1",
        "react-native": "0.42.0"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "2.1.0",
        "jest": "20.0.4",
        "react-test-renderer": "~15.4.1"
    },
    "jest": {
        "preset": "react-native"
    }
}

2_1.png

三、安装react-native模块

在终端cd到项目目录，然后执行npm install。

3_1.png

3_2.png

四、导入react-native框架

1.创建一个新的文件夹，命名为Librarys，到时候要把rn的项目拉进文件夹中。

4_1.png

2.把rn的项目拉进文件夹中

这里要拉的比较多也比较杂，先拉React.xcodeproj文件。（路径如图）

4_2.png

再拉node_modules/react-native/Libraries下的文件

4_3.png

4_4.png

3.Link Binary With Libraries中添加.a库

4_5.png

（点击+按钮 全部添加后，在删除tvOS的就好，最后别忘了加上libstdc++.tbd）
（ps：这里我漏删除了一个tvOS的静态库，导致运行出错，删了就行，懒得再截图了。。。）

4.在Edit Scheme的Build中添加React

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

4_6.png

4_7.png

五、最后的配置

Build Settings的Other Linker Flags设置为 -ObjC
Header Search Paths设置为/react-native/React路径，并设置为 recursive。

5_1.png

六、创建index.ios.js文件

创建index.ios.js文件，到时候，rn代码要写在这里。当然，放在node_modules同一个目录下就可以。

6_1.png

七、设置AppDelegate.h代码

这里是为了获得rn的代码，从而相互传递数据

#import "AppDelegate.h"
#import <React/RCTRootView.h>
#import <React/RCTBundleURLProvider.h>
#import "ViewController.h"

@interface AppDelegate ()

@end

@implementation AppDelegate


- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    NSURL *jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                        moduleName:@"RNTest"
                                                 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;
}

也不一定要写在这里，可以放在需要使用rn的VC中。

八、使用了HTTPS协议进行传输

为了能上网，在info.plist文件中添加一个字典类型的key为App Transport Security Settings。。。不说了

九、运行

作者：Jabber_YQ
链接：http://www.jianshu.com/p/de1466e140ae
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。