最好先用命令行創建一個RN,react-native init + 項目名, 後面集成的時候可以直接拿來用裏面的文件,而不用命令行查詢版 本,因爲RN建議裏面的react-native或react使用最新版本。
1、搭建ReactNative 開發基礎環境,按https://reactnative.cn/docs/0.45/getting-started.html
文檔來安裝必須的工具,中間可能會遇到不同的問題,但是經驗證明只要按照終端的提示問題點一步步來,都可以解決,我集成的時候主要問題我記得因爲網絡xcode command lIne Tools 未安裝成功,想跳過安裝下面的但是發現後面的時候還是有問題,還是不能急的。
在終端查看RN版本:react-native -v
我的RN版本是:v2.0.1
2、創建一個iOS 工程 MyRNTestDemo
3、進入到工程根目錄下面執行安裝ReactNative 命令行工具 npm install -g react-native-cli
4、在工程的根目錄下創建一個RNUtils 文件夾來存放相關的RN文件
5、在React 文件夾下創建一個package.json 文件,也可以直接從剛創建的文件中拷貝過來但要打開修改成當前工程名,或直接輸入
{
"name": "MyReactNativeApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
}
}
6、安卓ReactNative 的依賴包,進入到React 目錄下執行npm install
7、安裝成功後進入RNUtils 目錄,創建index.ios.js(touch index.ios.js),也可以從剛纔創建的文件中copy 過來
8、使用cocopods 自動集成react-native
Pod file 文件內容爲:
pod ‘yoga’, :path => ’./RNUtils/node_modules/react-native/ReactCommon/yoga/yoga.podspec’
pod ‘React’, :path => ‘./RNUtils/node_modules/react-native’, :subspecs => [
'Core',
'ART',
‘DevSupport’,
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
'BatchedBridge’,
]
9、執行pod install
10、工程中注意添加libc++庫
11、配置網絡
12、如果發現
can't find variable:xxx
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
Dimensions,
xxx,
} from 'react-native';
添加即可13、
方法:
index.ios.js 內註冊app名寫錯
也有其它集成方式比如:把iOS 項目放到RN的子目錄下,那樣就是以RN爲主,但是我總感覺那樣就不是iOS 集成RN了,所以選擇了這種。
其它方式參考:https://juejin.im/entry/5a16342051882503eb4af0ad
https://reactnative.cn/docs/0.45/integration-with-existing-apps.html#content
我的demo地址:http://download.csdn.net/download/mengguihua110/10266108
RN 版本的變動會帶來不同的問題點。
問題點:
原因是我未添加‘DevSupport’,網上竟然沒人遇到過同樣的問題,mark 一下吧。遇到這類問題可以去找下文件目錄,確認路徑下能否搜索到,然後判斷是否未導入或路徑是否設置錯誤
問題點:
"facebook::react::IRemoteConnection::~IRemoteConnection()", referenced from:
RemoteConnection::~RemoteConnection() in libReact.a(RCTInspector.o)
"facebook::react::systemJSCWrapper()", referenced from:
-[RCTSamplingProfilerPackagerMethod handleRequest:withResponder:] in libReact.a(RCTSamplingProfilerPackagerMethod.o)
-[RCTDevSettings isJSCSamplingProfilerAvailable] in libReact.a(RCTDevSettings.o)
-[RCTDevSettings toggleJSCSamplingProfiler] in libReact.a(RCTDevSettings.o)
"facebook::react::parseTypeFromHeader(facebook::react::BundleHeader const&)", referenced from:
+[RCTJavaScriptLoader attemptSynchronousLoadOfBundleAtURL:runtimeBCVersion:sourceLength:error:] in libReact.a(RCTJavaScriptLoader.o)
。。。。
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
解決方法:
pod 中增加'BatchedBridge', #RN版本高於0.45之後必須導入