iOS 原生項(xiàng)目集成 React Native

前置條件，配置react native 環(huán)境，官網(wǎng)有很詳細(xì)的介紹，此處就不敘述了，請(qǐng)自行前往 傳送門(mén)

正文

• 設(shè)置目錄結(jié)構(gòu)

創(chuàng)建一個(gè)空的文件夾用于存放 React Native 項(xiàng)目，然后在其中再創(chuàng)建一個(gè)ios文件夾，將現(xiàn)有的 iOS 項(xiàng)目拷貝到子目錄中，如下圖，本次示例結(jié)構(gòu)目錄為 RNDemo/ios

目錄結(jié)構(gòu)

• 安裝 JavaScript 依賴

在RNDemo中創(chuàng)建一個(gè)文件名為package.json文件，然后填入 React Native 相關(guān)信息，建議先使用 react-native 命令創(chuàng)建一個(gè)純 react native 項(xiàng)目，然后拷貝 package.json,這樣可以確保版本對(duì)照關(guān)系是正確的，附上本次 demo 的內(nèi)容

{
  "name": "Demo1",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-code-push": "^5.3.4"
  },
  "devDependencies": {
    "babel-jest": "23.0.1",
    "babel-preset-react-native": "4.0.0",
    "jest": "23.0.1",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

然后執(zhí)行命令安裝依賴

npm install

成功后如下圖:

安裝 JavaScript 依賴

• 使用 CocoaPods 安裝 React Native 依賴

具體怎么安裝/使用 CocoaPods 此處就不敘述了，iOS 開(kāi)發(fā)人員應(yīng)該都會(huì)，如果不會(huì)的話，請(qǐng)自行 Google

附上 Podfile 文件內(nèi)容：

pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.45則加入此行
    'DevSupport', # 如果RN版本 >= 0.43，則需要加入此行才能開(kāi)啟開(kāi)發(fā)者菜單
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 這個(gè)模塊是用于調(diào)試功能的
    'RCTAnimation',
    'RCTActionSheet',
    'RCTImage',
    'RCTVibration',
    'RCTSettings',
    'RCTGeolocation',
    'RCTLinkingIOS'
  ]
  # 如果你的RN版本 >= 0.42.0，則加入下面這行
  pod "yoga", :path => "../node_modules/react-native/ReactCommon/yoga"

   # 如果RN版本 >= 0.45則加入下面三個(gè)第三方編譯依賴
  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'

執(zhí)行命令安裝 Pod

pod install

安裝好后如圖所示:

目錄結(jié)構(gòu)

目錄結(jié)構(gòu)

• 代碼集成

在 RNDemo目錄下創(chuàng)建一個(gè) index.ios.js 文件，然后在 Xcode 中使用RCTRootView加載界面即可，此處可參考官方 demo,不再敘述

• 運(yùn)行 Debug版本 測(cè)試

1.Xcode 配置允許訪問(wèn)網(wǎng)絡(luò)

image.png

2. 啟動(dòng)本地服務(wù)
npm start

3.運(yùn)行應(yīng)用
# 在項(xiàng)目的根目錄中執(zhí)行 本例為 RNDemo
react-native run-ios

END

Tip

• 正式發(fā)布時(shí)，如果沒(méi)有是CodePush 或者第三方熱更新服務(wù)的話，需要將 js 文件index.ios.js 打包成 jsbundle 集成到 Xcode 項(xiàng)目中

react-native bundle --entry-file inde.ios.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios/

#exp
react-native bundle --entry-file xxx.js --platform ios --dev false --bundle-output ./ios/main.jsbundle --assets-dest ./ios/

Tip 會(huì)持續(xù)更新...