ReactNative初體驗--配置和安裝
前言
開始知道react native的時候,看著要配置軟體就發怵,然後就一直沒學習,後來在朋友的介紹下,產生對它的興趣,然後便開啟對react的探索旅程。
搗鼓了一天終於寫了一個HelloWord,現在記錄下過程,以方便後續的進行。
安裝
首先安裝步驟都是在終端上進行操作的
1.安裝Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
當出現success,則安裝成功了,耐心等待。
2.安裝Node
brew install node
3.安裝完 node 後建議設定 npm 映象以加速後面的過程(或使用科學上網工具)
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
4.Yarn、React Native的命令列工具(react-native-cli)
npm install -g yarn react-native-cli
安裝完 yarn 後同理也要設定映象源:
yarn config set registry https://registry.npm.taobao.org --global yarn config set disturl https://npm.taobao.org/dist --global
以上我也是摘取的管網的原話,感覺有問題的可以直接去官網檢視
我相信看文章的應該都是開發過app的啦,所以肯定有了Android studio
接著
ANDROID_HOME 環境變數配置
首先確定自己的sdk路徑
# 如果你不是通過Android Studio安裝的sdk,則其路徑可能不同,請自行確定清楚。 export ANDROID_HOME=~/Library/Android/sdk
其次開啟.bash_profile檔案
vim .bash_profile
然後將第一步的程式碼加入到開啟的檔案中
i編輯檔案 esc 退出編輯 :x 儲存退出
然後使用下列命令使其立即生效
source ~/.bash_profile
最後可以使用echo $ANDROID_HOME檢查此變數是否已正確設定。
測試安裝
react-native init AwesomeProject //新建一個專案 cd AwesomeProject //到專案的位置 react-native run-android //執行專案
假如你很幸運一遍就順利執行出來了,那接下來就建立你自己的helloword吧
更改你的app.js試試~~
測試專案遇到的問題
一.unable to load script from assets 和could not connect to development server.
解決辦法:
1.在 android/app/src/main 目錄下建立一個 assets空資料夾
mkdir android/app/src/main/assets
2.在專案根目錄執行
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/
二.Could not connect to development server
命令列執行
adb reverse tcp:8081 tcp:8081
不行的話
再不行只能自己想辦法了
資料
喵印~~~