iOS 項目集成RN步驟和問題點

 最好先用命令行創建一個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之後必須導入


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章