開發語言:ReactNative 0.59.5
開發環境:Mac + Xcode 10.2 + Android
1、ReactNative開發環境搭建
參考文章:搭建開發環境
由于筆者的電腦為mac,所以以mac為例進行開發環境搭建
1.1 安裝brew(如已安裝可跳過)
控制臺輸入指令:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
1.2 安裝Node,Watchman
控制臺輸入指令:
brew install node
brew install watchman
1.3 設置npm鏡像
控制臺輸入指令:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
1.4 安裝yarn,React-native-cli
控制臺輸入指令:
npm install -g yarn react-native-cli
1.5 設置Yarn鏡像
控制臺輸入指令:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
2、IOS Demo
注意,如果使用的RN版本大于0.45,由于國內的下載速度的問題,需要先按照以下鏈接配置第三方庫,如果沒有確切的版本需求,可以通過以下命令創建小于0.45版本的RN來避免第三方庫的引用問題。
react-native init MyApp --version 版本號(需要精確2個小數點,例如0.44.3)
完成以上準備工作后,可以使用以下命令來創建Demo了
react-native init MyApp
執行命令后,進入MyApp/ios目錄,在該目錄下有MyApp.xcodeproj文件,使用xcode打開此文件后,就可以通過xcode開編譯ios的Demo了
3、Android Demo
開發Android App通常時候Android Studio,在安裝Android Studio時需要確保以下選項是被選中的
- Android SDK
- Android SDK Platform
- Performance (Intel ? HAXM) (AMD 處理器看這里)
- Android Virtual Device
安裝完畢后需要確定Android SDK也已經安裝成功。在SDK Manager中選擇"SDK Platforms"選項卡,然后在右下角勾選"Show Package Details",確保Android 9 (Pie)選項下勾選了以下組件。
- Android SDK Platform 28
- Intel x86 Atom_64 System Image(官方模擬器鏡像文件,使用非官方模擬器不需要安裝此組件)
最后我們需要配置環境變量,將Android SDK的路徑告訴React Native。
控制臺輸入以下命令
vi ~/.bash_profile
然后添加以下命令到.bash_profile文件中,保存并退出。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
最后使用如下命令讓環境變量立即生效
source $HOME/.bash_profile
完成以上準備工作后,如果我們已經創建過React Native的項目,我們可以打開Android Studio,打開MyApp/Android目錄,就可以看到我們的Android項目了。
我們使用手機測試我們的Demo,但注意,Debug版的React Native項目,需要我們手動開啟服務器,在React Native項目根目錄下使用控制臺執行以下命令開啟服務器。
yarn start
在實際開發中,我們會不停的修改界面腳本文件,而App可以通過服務器來請求獲取最新的腳本文件(IOS模擬器使用command+R命令,Android真機使用搖一搖彈出菜單,選擇Reload)
在首次時候Android真機調試App時,通常會出現無法連接的情況,我們需要將手機和電腦置于同一個wifi內,然后使用搖一搖彈出菜單,選擇Dev Settings->Debug server host & port for device 輸入我們電腦的IP+端口(例如192.168.2.45:8081)端口默認是8081。然后Reload即可。