iOS Native include RN

[plimerence]

Native中嵌入RN遇到的坑

第一步：参考官网或者中文网集成教程，需要特别注意一点的坑,facebook官网的版本podfile没有加CxxBridge,这个会导致集成错误，具体参考`# target的名字一般与你的项目名字相同

target 'NumberTileGame' do

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

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

pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的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`

第二步，项目构建起来，代码可以跑起来，但是你会发现build的时候并没有自动开启server ，每次都需要手动开启，非常的不优雅，这个不能忍哦，然后你google一下，你会发现执行一段xcode.sh脚本，然后你在Build Phases中配置了 发现并没有卵用。。。。。。对的却是没有卵用 ，然后继续研究，发现开启服务器其实就是执行了node_modules/react-native/scripts下的一个脚本launchPackager.command，所以你可以参考我的脚本配置在build phases中，对应的路径自己修改`if nc -w 5 -z localhost 8081 ; then

if ! curl -s "http://localhost:8081/status" | grep -q "packager-status:running" ; then echo "Port 8081 already in use, packager is either not running or not running correctly"
exit 2
fi
else
open $SRCROOT/../node_modules/react-native/scripts/launchPackager.command || echo "Can't start packager automatically"
fi`

第三步，看起来很优雅了，然后你打包，却突然发现crash，然后你把包解压发现，里面并没有main.jsbundle，你意识需要先把js包打出来，然后你参考xcode.sh脚本你发现了打包指令， "bundle-ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/Native/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"，优雅的方式是把脚本配置到packager.json ，然后npm run.

终于看起来跟rn套RN效果差不多了，赶紧写代码尝试一下，我想赶紧试下需要link的库会不会有问题，然后我尝试了一下组件react-native-image-sequence，这个组件没什么特殊就是做一个图片组动画，用原生方法来写性能好，安装好 执行react-native link，然后build 。。。。然后就报红了，百思不得其解，给作者贴issue也不鸟我，纠结了好久，这期间尝试其他的需要link的三方库，其他的都是OK的，在podfile文件会出现 pod 'RNSVG', :path => '../node_modules/react-native-svg'类似这种，然后去node_modules下面查看对应的模块 发现link完不报错的都会有.podspec文件（我理解为这个库支持pod管理）,然后react-native-image-sequence这个组件目录下并没有.podspec。至此真想大白。。。。。话说这个库不支持在pod环境下link啊 只能这个理解啦 ，这个算是个坑，纠结了两天，后续有时间可以研究下.podspec ，暂时先这样吧，毕竟这个库代码没有多少，自己写个模块也可以。