iOS原生项目嵌入React Native模块

2017-07-27 本文已影响124人 FanChason

React Native近两年比较火热。
也许有不少移动开发者想接触，都有这样的尝试，
就是希望——在现有iOS原生项目中嵌入（或者说集成）React Native组件或者模块。

看了些博客经验，或许是RN语言版本的变更，导致集成会出各种各样问题。（说明：以下ReactNative简称RN）

先放一张嵌入好的运行结果图：

Untitled.gif

下面就总结一下自己的嵌入过程：

以下建立在RN环境已经搭建好，cocoapods已经安装好。

1，拷贝RN文件

a,创建RN项目

react-native init RNDemo

b,创建XCode项目

c,拷贝RN项目中三个文件到XCode项目

(三个文件：index.ios.js 、node_modules、package.json)

Snip20170726_15.png

2，cocoapods导入RN

a,编辑Podfile文件

先初始化pod
pod init
编辑Podfile文件
sudo vim Podfile

添加需要的库文件，如下：

target 'RNDemo' do 
 
pod "Yoga", :path => "./ReactComponent/node_modules/react-native/ReactCommon/yoga"
pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
'Core',
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'BatchedBridge',
]
end

注意几点：
1，target 'RNDemo' 中单引号内容为您的项目名称；
2，path 后面的路径是您再根目录下创建存放node_modules的路径；
3，BatchedBridge 好多教程中没添加进去，没有会出现以下报错。