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 ,暂时先这样吧,毕竟这个库代码没有多少,自己写个模块也可以。
Native中嵌入RN遇到的坑
第一步:参考官网或者中文网集成教程,需要特别注意一点的坑,facebook官网的版本podfile没有加CxxBridge,这个会导致集成错误,具体参考`# target的名字一般与你的项目名字相同
target 'NumberTileGame' do
'node_modules'目录一般位于根目录中
但是如果你的结构不同,那你就要根据实际路径修改下面的
:pathpod '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 ,暂时先这样吧,毕竟这个库代码没有多少,自己写个模块也可以。