RN學習(二)——集成CodePush

    上一篇我整理的是安裝RN環境以及建立第一個RN項目,也是我初識RN的第一步,爲了看相似熱更新的效果,我先開始集成的CodePush。node

    網上文章都還挺多的,可是我第一次集成的時候就有問題,此次寫的時候又鼓搗了半天。。。寫的不對的地方,請你們多多指點~~react

安裝CodePush到本地===在根目錄下操做

1. 安裝CodePush

npm install -g code-push-cli
複製代碼

測試CodePush是否安裝成功,可用以下圖所示來測。若本地安裝,則會顯示對應版本號。

2.註冊CodePush

code-push register
複製代碼

3.登陸CodePush,瀏覽器會出現token

4.將token 複製粘貼過來。

判斷是否登陸成功,可以下所示來測。也可用code-push whoami來查看登陸的帳號。

5. CodePush添加app。

code-push app add RNTest ios react-native
複製代碼

RNTest:項目的名稱,ios:若是是安卓用android。成功後,以下圖所示。android

好了,codePush安裝完了,並且項目也建立了。這個跟我們平時用的極光、友盟等第三方帳號同樣。添加完後,可在appcenter裏面看到。ios

項目裏集成CodePush===在項目目錄下操做

1. 進入RN項目,添加CodePush。

npm install react-native-code-push --save
複製代碼

安裝成功後,可在項目以下圖路徑裏找到對應文件。npm

2. 進入ios文件夾,建立Podfile

將Podfile裏面的這個target刪掉,不然工程跑不起來。

3. 往Podfile裏面添加依賴庫react-native-code-push。

react-native link react-native-code-push
複製代碼

Podfile以下所示,多一個CodePushjson

4. 進入ios工程裏面,pod install。

cd ios
pod install
複製代碼

5.如今run後,Xcode報錯以及解決。

將下圖Library處刪掉。這是RN建立項目的時候,沒有pod本身添加進來的 react-native

而後手動將下面的添加到Podfile文件中。

# Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  # Third party deps podspec link
  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'
複製代碼

如今運行,又報了下方的錯誤。 瀏覽器

莫慌,解決辦法以下:bash

  1. 刪除圖下兩個文件package-lock.json和node_modules,而後npm install

  1. 刪除Podfile.lock和Pods,而後pod install

  1. 如今能夠了。

吐槽

    這篇我確實想小吐槽一下,多是第一次裝的時候,太不熟悉了,徹底一臉慒,還遇到了各類奇葩的問題。各類查資料,詢問各位RN大神。如今感受,好像遇到的那些奇葩的問題(當時網上找了好多,試了很差使的)均可以用下面這些來解決,雖然簡單粗暴,可是挺好使。app

  1. 若是本地服務已經起來,以下圖所示,那就先結束。或者npm start前先這樣:killall -9 node。

  1. 刪除package-lock.json,刪除node_modules,而後npm install
  2. 若是很差使,且有Pod的話,刪除Podfile.lock和Pods,而後pod install

    OK,這篇就先到這裏了~目前我是按我學習的順序來整理的。下篇整理集成CodePush後APP的展現效果,主要包括Xcode配置、打包上傳和app的最終呈現。

相關文章
相關標籤/搜索