把React Native组件嵌入到iOS

要求：

1、熟悉Xcode编程

2、了解终端常用命令

3、会用CocoaPods做iOS程序的依赖管理

第一步：开发环境搭建

1、CocoaPods的安装，如果已安装完，直接跳过该步骤。

2、搭建RN开发环境，如果已经搭建好，直接跳过该步骤。

第二步：把React Native组件嵌入到iOS

1、设置项目目录结构

打开现有的iOS项目，在其中创建一个/ios子目录；然后将根目录中所有的iOS文件都拷贝到 /ios 子目录中。

设置项目目录结构

2、安装JavaScript依赖包

2.1、创建安装依赖包文件package.json

打开终端，cd到根目录，执行命令

$  npm init

跟着提示一步步执行，主要设置的是名字(name 不支持大写)和版本，其他默认或者不输入。

创建安装依赖包文件package.json

执行成功之后会看到基本的json样式，可以在根目录中看到创建成功的package.json文件。

package.json文件

2.2、配置安装依赖包文件package.json

按下图红色区域方式配置package.json文件。

"private": true,

"scripts": {

    "start": "node node_modules/react-native/local-cli/cli.js start"

},

配置安装依赖包文件package.json

2.3、添加JS环境

使用终端，cd到根目录，执行下面的命令

$ npm install --save react

$ npm install --save react-native

2.4、报错处理

执行完，可能会出现下图中的报错信息。

报错信息

报错信息1：

npm WARN [email protected] requires a peer of [email protected] but none is installed. You must install peer dependencies yourself.

解决方案：执行命令

$ npm install --save [email protected]

报错信息2：

npm WARN [email protected] requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.

解决方案：Xcode方式打开package.json文件，添加如下两行，然后回到终端，执行命令

$ npm install

添加依赖

补充：dependencies中的react和react-native的版本取决于你的具体需求，推荐使用最新版本。可以使用下面的命令查看当前的最新版本。

$ npm info react

$ npm info react-native

成功安装JavaScript依赖包，会看到根目录多了2个文件。

成功安装JS依赖包

3、创建Podfile文件

3.1、创建Podfile

终端cd到/ios子目录, 执行下面命令

$ pod init

创建Podfile

3.2、配置Podfile

# Uncomment the next line to define a global platform for your project

# 别忘了把这里的注释去掉

platform :ios, '9.0'

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

target 'RNInsertApp' do

    # 'node_modules'目录一般位于根目录中

    # 但是如果你的结构不同，那你就要根据实际路径修改下面的':path'

    pod 'React', :path => '../node_modules/react-native', :subspecs => [

        'Core',

        'CxxBridge',

        'DevSupport',

        'RCTText',

        'RCTNetwork',

        'RCTWebSocket',

    ]

    # 如果你的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

配置Podfile

3.3、安装React Native的pod包

创建好了Podfile后，就可以开始安装React Native的pod包了。执行命令

$ pod install

安装React Native的pod包

4、index.js文件（rn的入口函数）

4.1、创建index.js文件

终端cd到根目录, 执行下面命令

$ touch index.js

创建index.js文件

4.2、添加你自己的React Native代码

React Native代码

5、编写代码调用RN

打开/ios子目录中的".xcworkspace"，编写调用RN代码。

调用RN代码

6、配置info.plist

Apple默认会阻止读取不安全的HTTP链接，我们需要把本地运行的Packager服务添加到info.plist中，以便能正常访问Packager服务。

NSAppTransportSecurity

NSExceptionDomains

localhost

NSTemporaryExceptionAllowsInsecureHTTPLoads

配置info.plist

7、运行Package

运行Package，启动开发服务器。终端cd到项目根目录中， 执行下面命令

$ npm start

运行Package

8、运行应用

打开/ios子目录中的".xcworkspace"，运行应用。

运行应用

项目源码

RN嵌入原生App源码

参考博客

reactnative.cn