在现有的原生应用中嵌入React Native页面(ios版)

2019年9月19日 175次阅读 来源: myairforce1

通常情况下我们有两种方式来构建一个使用RN技术的应用：

  1. RN包原生。应用入口由RN控制，页面跳转逻辑也由RN主导，当涉及做原生增强时使用RN的API构建一些原生的模块并暴露出来给RN调用。
  2. 原生包RN。应用入口由原生代码控制，页面跳转逻辑由原生主导。某些跨平台业务逻辑页面由RN开发。充分利用RN的跨平台特性，较少原生开发的巨大成本。

当采用第二种方式时就需要在原生应用中嵌入RN页面。现在就手把手的教大家如何操作。为方便大家理解，我们从一个全新创建的Objective C项目出发。

第一步，创建一个OC原生项目。

在XCode中快速地创建一个OC single view 项目。
《在现有的原生应用中嵌入React Native页面(ios版)》

第二步，添加RN需要的npm依赖项目。

和其他js项目一样，添加RN的npm 依赖首先需要在项目的根目录下创建一个package.json文件。二话不说，直接在项目根目录下新建package.json,然后拷入以下代码:

{
    "name": "EmbedRN",
    "version": "0.0.1",
    "private": true,
    "scripts": {
      "start": "node node_modules/react-native/local-cli/cli.js start",
      "test": "jest"
    },
    "dependencies": {
      "react": "~15.4.0-rc.4",
      "react-native": "0.38.0"
    },
    "devDependencies": {
      "babel-jest": "21.0.0",
      "babel-preset-react-native": "3.0.2",
      "jest": "21.0.1",
      "jest-react-native": "18.0.0",
      "prop-types": "^15.5.10",
      "react-test-renderer": "~15.4.0-rc.4"
    },
    "jest": {
      "preset": "react-native"
    }
  }

React和RN的版本根据自己的需要进行设定，但要注意二者版本匹配。如果不确定可以自己先react-native init一个项目看一下版本号。

接下来，熟悉得不能再熟悉的动作了: npm install。

安装完成后我们在项目的根目录下就多了一个子目录node_modules/。亲切吧。

第三步，安装cocopod依赖项。

使用cocodpod可以快速帮助我们添加React Native依赖项到原生项目里去。首先在项目根目录下新建Podfile（通过执行pod init），这是cocopod的依赖项目录。
拷入以下内容：

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

依赖的库名是React, 根据项目的需要添加不同的subspecs进来。如要使用Text那么加进来RCTText, Image就加RCTImage等等。可用的subspecs列表可以查阅node_modules/react-native/React.podspec文件。

好了，有了node_modules和Podfile,接下来运行命令:

pod install

《在现有的原生应用中嵌入React Native页面(ios版)》

Pod项目依赖安装成功。关闭当前xcode session，从此以后我们就使用.xcworkspace来打开我们的项目了。

第四步，编写RN页面

新建RN入口页面：index.ios.js。至于这里的文件名是否一定必须是index.ios.js，回答是否定的。你可以使用任意的文件名，只要后面在oc代码中指定同样的文件名就可以了。
比如你想使用business2.js做文件名，没问题，在后面的oc代码中指定好jsCodeLocation地址就可以了。这样就可以保证原生应用按照不同的业务场景嵌入不同的RN页面。


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


export default class Page1 extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#F5FCFF'}}>
        <Text>
          Welcome to React Native!
        </Text>
        <Text>
          To get started, edit index.ios.js
        </Text>
        <Text>
          Press Cmd+R to reload,{'\n'}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}


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

第五步，原生页面调用RN页面

在ViewController.m中添加如图代码。 RCTRootView就是终极大法了。

《在现有的原生应用中嵌入React Native页面(ios版)》

第六步，运行

首先打开RN的package server:

npm start -- --reset-cache

然后xcode中运行项目。
大功告成。

    原文作者：myairforce1
    原文地址: https://segmentfault.com/a/1190000011577968
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞