RN 集成已有应用

在React Native的应用场景中，有时候一个APP只有部分页面是由React Native实现的，比如：我们常用的携程App，它的首页下的很多模块都是由React Native实现的，这种开发模式被称为混合开发。

一、下面介绍一些混合开发的应用场景：

1、在原有项目中加入RN页面，在RN项目中加入原生页面

2018-12-26.png

2、原生页面中嵌入RN模块

2018-12-26.png

3、RN页面中嵌入原生模块

2018-12-26.png

二、下面介绍一些混合开发的应用场景：

1、创建一个React Native项目

• 方法一：通过npm安装react-native的方式添加一个React Native项目；
• 方法二：通过react-native init来初始化一个React Native项目；

三、通过npm方式创建一个React Native项目

       第一步：创建一个名为RNHybrid的目录，然后在该目录下添加一个包含如下信息的package.json：

{
  "name": "RNHybrid",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }
}

       第二步：在为package.json添加react-native，在该目录下执行：

npm install --save react-native

执行完上述命令之后，你会看到如下警告：

屏幕快照 2018-12-26 上午12.36.52.png

其中，有一条警告npm WARN react-native@0.57.8 requires a peer of react@16.6.3 but none is installed告诉我们需要安装react@16.3.1：

npm install --save react@16.3.1

至此，一个不含Android和iOS模块的React Native项目便创建好了

提示：npm 会在你的目录下创建一个node_modules，node_modules体积很大且是动态生成了，建议将其添加到.gitignore文件中；

四、通过react-native的方式添加一个React Native项目

1、创建一个没有原生项目RN

react-native init RNHybrid

       完成一个ReactNative项目，然后我们将里面的android和ios目录删除，替换成已存在Android和iOS项目。目录结构如下：

RNHybrid
├── RNHybridiOS
├── package.json
├── node_modules
└── .gitignore

2、配置CocoaPods依赖

①、创建Podfile文件
②、写入代码

# target的名字一般与你的项目名字相同
target 'RNHybridiOS' do

  # 'node_modules'目录一般位于根目录中
  # 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.47则加入此行
    'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 调试功能需要此模块
    'RCTAnimation', # FlatList和原生动画功能需要此模块
    # 在这里继续添加你所需要的其他RN模块
  ]
  # 如果你的RN版本 >= 0.42.0，则加入下面这行
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

end

③、进行初始化

pod install

2018-12-26.png

执行成功之后，你会看到如下输出：

如果：出现 xcrun的错误，需要安装Command Line Tools for Xcode，打开XCode -> Preferences -> Locations 选择Command Line Tools：

2018-12-26.png

3、设置App Transport Security Settings

由于我们的RNHybridiOS应用需要加载本地服务器上的JS Bundle，而且是http的协议传输，所以需要设置App Transport Security Settings，让其支持http传输，否则会出现如下错误：

屏幕快照 2018-12-26 下午11.02.12.png 2018-12-26.png

4、然后在项目中添加代码

5、运行React Native

启动服务器：

npm start

运行项目：Command + R

三、添加更多React Native的组件

我们可以根据需要添加更多的React Native的组件：

import { AppRegistry } from 'react-native';
import App from './App';
import App2 from './App2';

AppRegistry.registerComponent('App1', () => App);
AppRegistry.registerComponent('App2', () => App);

四、调试、打包、发布应用

1、调试

       调试这种混合的RN应用和调试一个纯RN应用时一样的，都是Command + D打开RN 开发者菜单，Command + R进行reload JS

2、打包

       把JS代码打包进iOS ipa中，通过以下命令

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

记得在运行上述命令之前先创建一个release_ios目录。

参数说明

--platform ios：代表打包导出的平台为iOS；
--dev false：代表关闭JS的开发者模式；
-entry-file index.js：代表js的入口文件为index.js；
--bundle-output：后面跟的是打包后将JS bundle包导出到的位置；
--assets-dest：后面跟的是打包后的一些资源文件导出到的位置；
上述命令执行完成之后，会在release_ios目录下生成main.jsbundle，main.jsbundle.meta，以及assets目录(如果RN中用到了一些图片资源的话)。

3、将js bundle包和图片资源导入到iOS项目中

这一步我们需要用到XCode，选择assets文件夹与main.jsbundle文件将其拖拽到XCode的项目导航面板中即可

!屏幕快照 2018-12-26.png](https://img.haomeiwen.com/i2358583/c5cd1739ea71f7c4.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

然后，修改jsCodeLocation，添加如下代码

  NSURL *jsCodeLocation;
 //jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; 
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

上述代码的作用是让React Native去使用我们刚才导入的jsbundle，这样以来我们就摆脱了对本地nodejs服务器的依赖。

提示：如果在项目中使用了CodePush热更新，那么我们需要就可以直接通过CodePush来读取本地的jsbundle，方法如下：

  NSURL *jsCodeLocation;
#ifdef DEBUG     jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else     jsCodeLocation = [CodePush bundleURL];
#endif 

到目前为止呢，我们已经将js bundle包和图片资源导入到iOS项目中，接下来我们就可以发布我们的iOS应用了。