原生iOS项目嵌入React Native

前言:

如果从头开始创建应用, 那么React Native 已经有详细的教程. 本文主要梳理一下在原生项目中添加一两个React Native视图或业务流程.

主要步骤:

1. 创建RN组件文件夹
2. 以Pod形式植入RN的依赖库
3. 在Xcode项目中创建RCTRootView用来承载React Native视图, 这里需要注意模块名字与注册组件名字要一致.
4. 先启动React Native的Packager服务, 后运行app

1. 创建RN组件文件夹, 文件夹下创建package.json文件:

package.json.png

1.1 在package.json文件的内容大致这样:

{
    "name": "LearnX2",
    "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.6",
        "react-native": "0.44.3"
    },
    "devDependencies": {
        "babel-jest": "22.4.0",
        "babel-preset-react-native": "4.0.0",
        "jest": "22.4.0",
        "react-test-renderer": "16.0.0-alpha.6"
    },
    "jest": {
        "preset": "react-native"
    }
}

1.2 使用npm(Node package manager) 来安装React和React Native模块. 在package.json文件目录中运行命令行:

$ npm install

运行完成后出现node_modules文件夹, 它包含了RN模块:

执行命令安装模块.png

2. 以Pod形式植入RN的依赖库

在你开始把React Native植入到你的应用中之前，首先要决定具体整合的是React Native框架中的哪些部分。而这就是subspec要做的工作。在创建Podfile文件的时候，需要指定具体安装哪些React Native的依赖库。所指定的每一个库就称为一个subspec。

可用的subspec都列在node_modules/react-native/React.podspec中，基本都是按其功能命名的。一般来说你首先需要添加Core，这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些React Native核心库。如果你想使用React Native的Text库（即<Text>组件），那就需要添加RCTText的subspec。同理，Image需要加入RCTImage，等等。

podfile创建完成之后，在文件里添加一下内容：

# 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => './RNComponent/node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTNetwork',
    'RCTImage',
    'RCTWebSocket', # 这个模块是用于调试功能的
    # 在这里继续添加你所需要的模块
  ]
  # 如果你的RN版本 >= 0.42.0，请加入下面这行
  pod "Yoga", :path => "./RNComponent/node_modules/react-native/ReactCommon/yoga"

执行pod

$ pod install

3. 在Xcode项目中创建RCTRootView用来承载React Native视图

RNViewController.png

在RNViewController 中导入#import <RCTRootView.h>

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    
    NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
    NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
    
    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                         moduleName:@"LearnX2"
                                                  initialProperties:nil
                                                      launchOptions:nil];
    self.view = rootView;
}

4. 先启动React Native的Packager服务, 后运行app

4.1 在RN目录下创建RN入口文件index.ios.js

index.ios.js.png

4.2 编辑index.ios.js 注意这里的AppRegistry的名称是否与模块名称一致

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class LearnX2 extends Component {
  render() {
    return (
      <View style={styles.container}>
          <Text>我是一张图片</Text>
          <Image source={{uri: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1519293489102&di=c840cd6bc7c842a114b1f4014cb753a6&imgtype=0&src=http%3A%2F%2Fimg5.duitang.com%2Fuploads%2Fitem%2F201505%2F01%2F20150501164159_jQF2H.jpeg'}} style={styles.imageStyle}></Image>
      </View>
    );
  }
}

const 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,
  },
  imageStyle: {
    width:200,
    height:100,
  },
});

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

4.3 在RN目录下启动开发服务器:

$ npm start

运行项目, 看到效果:

效果图.gif

参考:
https://www.jianshu.com/p/a133d7e45aed