记录 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 [email protected] --save

install react-native --save  ,如果是安装指定版本就用:npm install [email protected] --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

end

你可能感兴趣的:(记录 iOS原生工程嵌入react native 及蹚坑)