ReactNative混合開發-1 環境搭建

開發語言: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)

RN 0.45以上版本第三方庫配置

完成以上準備工作后,可以使用以下命令來創建Demo了

react-native init MyApp

執行命令后,進入MyApp/ios目錄,在該目錄下有MyApp.xcodeproj文件,使用xcode打開此文件后,就可以通過xcode開編譯ios的Demo了

3、Android Demo

開發Android App通常時候Android Studio,在安裝Android Studio時需要確保以下選項是被選中的

安裝完畢后需要確定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即可。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容