记录 iOS原生工程嵌入react native 及蹚坑

前提是已经配置好node\npm\cocoapos等环境

1、为React Native项目创建一个新的文件夹（比如我的roomrndemo），在文件夹中新建/ios目录，拷贝所有原项目的内容到/ios目录下。

2、在刚刚新建的文件夹中（即根目录中）创建一个package.json文件：

cd到根目录：cd /Users/zhouyy/Desktop/roomrndemo ，执行命令：npm init -y

此时会在根目录下产生一个package.json内容为：

{

"name": "roomrndemo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "",

"license": "ISC",

}

下一步安装react、react-native：

（关于package.json配置及用法参照这里：https://www.cnblogs.com/datiangou/p/10172994.html）

3、安装最新react和react-native，

还是cd转到当前项目目录下，

用命令:

npm install react --save ,如果是安装指定版本就用：npm install react@16.8.6 --save

install react-native --save ,如果是安装指定版本就用：npm install react-native@0.60.1 --save

注意react 和react-native版本对应上，不过对应不上，也会提示你安装对应版本的react 的，不加版本的话会默认安装最新版本，我就装的最新版，下面会说明解决最新版的问题。。。

安装完会增加node_modules、package-lock.json文件，其中package.json文件会发生变化：

{

"name": "roomrndemo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"react": "^16.13.1",

"react-native": "^0.62.2"

}

执行完上面命令后会发现自动将package.json中的模块安装到node-modules文件夹下。node-modules里一堆的文件！

下一步就可以pod方式把node-modules中的本地文件引入原生工程了，当然你不pod自己手动拷进去也是可以的，但是pod 引用的好处就是RN中发生改变，原生引用的也会自动更新，这才是更官方的操作。

4、pod 引用（podfile配置是容易出问题的，导致pod失败，需要多检查）

在原生工程中创建podfile文件：cd到工程，使用命令：pod init 会生成一个podfile文件

然后把要引用的RN文件库添加到podfile中，使用引用本地库的描述方式：

编辑podfile时注意！注意！：

（1）给 dynamic frameworks 添加cocoapods 的话，需要注意：

A、用CocoaPods 导入swift 框架到 swift项目和OC项目都必须要 use_frameworks!

B、使用 dynamic frameworks，必须要在Podfile文件中添加一句：use_frameworks!，如果是通过pod init指令生成的podfile文件，会自动加上这个，如果是从其他工程拷进来，可能没有这句，注意加上！

选择 PROJECR/TARGET -> Build Settings -> Allow non-modular includes in Framework Modules -> YES

注意： Project 和 Target 需要同时设置。

因为新版本的 Pods 的方式是将第三方库制作成Dynamic Frameworks，相当于在 MyFramework 中引用别的 Framework，需要告诉编译器允许这种行为。

（2）pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga' //react-native 0.43.0以上必须添加这个！

注意：新版（我用的最新版RN：0.62.2版）的node_modules的库文件的路径发生了改变，如果是使用老版本的RN下的podfile路径会报错找不到的，反正记得每次升级都得修改和检查一遍podfile，重新install 一遍pod！

坑：新版本却少React-DevSupport.podspec和React-RCTWebSocket.podspec文件，去老版本拷贝一份。新版缺少fishhook文件,也是从其他版本拷贝过来的。而且有的文件路径发生了变化，也得检查修改。

解决问题：https://stackoverflow.com/questions/60300493/no-podspec-found-for-react-core-in-node-modules-react-native

之后还会有一堆报错，检查，文件路径不对的改过来，文件缺少的去其他版本拷贝过来，一步步解决报错。最后终于pod install成功了。所以谨慎升级RN的版本吧，觉得还是挺麻烦的。

ps:在ios目录下pod install时，总是会卡在boost-for-react-native，因为国内用户拉GitHub的代码会卡住，一直失败,解决办法：在ios目录下Podfile文件中，加入以下代码：

pod 'boost-for-react-native', :git => 'https://gitee.com/damon-s/boost-for-react-native.git’

（参考链接：https://blog.csdn.net/hxl517116279/article/details/104557850）

再pod install就可以下载下来了。

成功pod

关闭Xcode重新打开工程

最后贴出来成功的podFile文件完整内容是：

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

# platform :ios, '10.0'

require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'LiveVieoDemo' do

# Comment the next line if you don't want to use dynamic frameworks

use_frameworks!

# Pods for LiveVieoDemo

pod 'boost-for-react-native', :git => 'https://gitee.com/damon-s/boost-for-react-native.git’

pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"

pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"

pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"

pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"

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

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

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

pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'

pod 'RCTTypeSafety', :path => '../node_modules/react-native/Libraries/TypeSafety'

pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'

pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'

pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'

pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'

pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'

pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'

pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'

pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'

pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'

pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'

pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'

pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'

pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'

pod 'ReactCommon/callinvoker', :path => "../node_modules/react-native/ReactCommon"

pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"

pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga' #RN>0.43.0版本以上得加这个

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'

target 'LiveVieoDemoTests' do

inherit! :search_paths

# Pods for testing

end

target 'LiveVieoDemoUITests' do

# Pods for testing

end