天天看点

集成RN遇见的坑

先来简单了解下相关概念:

搭建环境:

1、安装必需的软件

1》Homebrew:

Mac系统的包管理工具,用于安装NodeJS和一些其他必须的工具软件

2》Node:

用Homebrew安装Node.js(是一个基于Chrome V8引擎的js运行环境)

 设置npm镜像:(npm:node package manager 节点包管理器,是Node.js的包管理器,用于节点插件的管理(包括安装,卸载,管理依赖等),npm是随最新版的Node.js安装的包管理工具)

「npm与cnpm的区别:https://www.jianshu.com/p/6dbecd1ff58d

npm官网的;cnpm淘宝的npm镜像」

3》Yarn:

是Facebook提供的替代npm的工具,可以加速node模块的下载。RN的命令行工具用于执行创建、初始化、更新项目、运行打包服务等任务。

设置Yarn镜像。

4》watchman:

Facebook提供的监事文件系统变更的工具,可以提高开发时性能(packager可以快速捕捉文件的变化从而实现实时刷新)

按https://www.jianshu.com/p/09b0e46b8567方法集成RN,不过我用的是0.61.1版本,可能版本差异比较大,在按这个博客集成过程中,出现很多问题,

这篇就来谈下将已有项目添加RN的时使用cocoapods管理RN依赖的坑:

podfile文件的配置是最大的坑,按这篇博客的配置,在pod install时是失败的,于是乎查官网,按RN官网配置podfile文件依旧是失败的,最后各种分析尝试,最终ok了,下边就直接把我的成果粘贴到下边:

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

 platform :ios, '9.0'

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

target 'testRN' do

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

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

#pod 'React-DevSupport', :path => '../node_modules/react-native/React'//0.61.1版本React-Core包含这个了

#pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'//这个暂时没发现,应该是弃用了,appstore不让hook了

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'//0.61.1版本React-Core包含这个了

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 'Yoga', :path => '../node_modules/react-native/ReactCommon/Yoga'

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

别的不多说,如果你的podfile总是不通过且用我这个试试吧,注意0.61.1版本,如果版本不一样,可能会出现问题哦