先來簡單瞭解下相關概念:
搭建環境:
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版本,如果版本不一樣,可能會出現問題哦