（iOS）React-Native集成到本地，实现与Native

一、新建一个工程，名为RNAndiOS(名字随便)

image.png

二、创建一个存放react-native的文件夹RN(名字随意)

image.png

三、RN文件夹下新建一个名为package.json的文件和一个index.ios.js的文件

package.json:

{
    "name": "RNAndiOS",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "^16.0.0-alpha.12",
        "react-native": "^0.47.2"
    },
    "devDependencies": {
        "babel-jest": "20.0.3",
        "babel-preset-react-native": "3.0.2",
        "jest": "20.0.4",
        "react-test-renderer": "16.0.0-alpha.12"
    },
    "jest": {
        "preset": "react-native"
    }
}

index.ios.js:

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

export default class RNAndiOS extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.welcome}>
                    iOS RN  混合开发的Demo
                </Text>
            </View>
        )
    }
}

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

AppRegistry.registerComponent('RNAndiOS', () => RNAndiOS);

五、cd到RN文件夹，执行npm install命令，安装成功后文件夹如下：

image.png

六、在项目根目录下创建Podfile（需要cocoapods，版本要最新的，不是的更新一下，不然会报错）,然后执行pod install命令

Podfile：

platform :ios, '8.0'
target "RNAndiOS" do

pod 'Yoga',  :path => ‘./RN/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => ‘./RN/node_modules/react-native', :subspecs => [
 'Core',
 'RCTText',
 'RCTImage',
 'RCTAnimation',
 'RCTNetwork’,
 'RCTWebSocket',
 'BatchedBridge' 
]

end

七、安装完成后文件夹如下：

image.png

八、打开RNAndiOS.xcworkspace(不是RNAndiOS.xcodeproj)，为了方便测试后面的RN与原生的互调，我们在项目里放一个导航控制器。

项目结构：

image.png

AppDelegate:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    ViewController *root = [[ViewController alloc] init];
    UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:root];
    self.window.rootViewController = nav;
    [self.window makeKeyAndVisible];
    return YES;
}

ViewController:

#import "ViewController.h"
#import "SecondViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor lightGrayColor];
    
    UIButton *pushButton = [UIButton buttonWithType:UIButtonTypeCustom];
    [pushButton setTitle:@"点我去RN" forState:UIControlStateNormal];
    pushButton.frame = CGRectMake(100, 100, 100, 100);
    [pushButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [pushButton addTarget:self action:@selector(pushToRN) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:pushButton];
}

- (void)pushToRN {
    SecondViewController *second = [[SecondViewController alloc] init];
    [self.navigationController pushViewController:second animated:YES];
}

@end

SecondViewController:

#import "SecondViewController.h"
#import <React/RCTRootView.h>
#import "RNSendBridgeModule.h"

#define KMainScreenW [UIScreen mainScreen].bounds.size.width
#define KMainScreenH [UIScreen mainScreen].bounds.size.height
#define isIphoneX (KMainScreenH == 812 ? YES : NO)

@interface SecondViewController ()

@end

@implementation SecondViewController

- (void)viewDidLoad {
    [super viewDidLoad]; 
    self.view.backgroundColor = [UIColor whiteColor];

    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNAndiOS" initialProperties:nil launchOptions:nil];
    rootView.backgroundColor = [UIColor whiteColor];
    rootView.frame = CGRectMake(0, isIphoneX?88:64, KMainScreenW, isIphoneX?KMainScreenH-122:KMainScreenH-64);//简单适配一下iPhone X
    [self.view addSubview:rootView];
}
@end

至此，准备工作结束。ViewController是原生，SecondViewController是react-native界面

九、cd到RN目录，执行 react-native start 命令，执行成功后直接运行项目。运行项目前记得在info.plist中配置允许http请求，不然会大红屏。也许会加载的有点慢，这很正常，因为debug模式的RN和release模式的RN简直不是同一个东西。

react-native start成功运行后是这样的：

image.png

iPhone X模拟器截图：

Simulator Screen Shot - iPhone X - 2017-11-20 at 15.35.16.png

至此React-Native已经集成到本地，RN和Native的交互在下一篇文章文章链接。

遇到红屏不要急，网上查错误信息，查不到看一下npm install有没有警告，是不是少安装了什么组件。还有cocoapod是不是最新的，info.plist有没有配置允许http请求，Podfile,packa.json,SecondViewController里的项目名有没有写错。