react native工程入門筆記

前言

最近接到一個需求，作一個android端的應用，在同事的建議和指導下選擇了React Native（下文簡稱RN），趁着本身搭工程的機會，總結一下一個RN工程從無到有的完整過程（此處只講android工程）。

RN簡介

RN是一個基於react的js庫，用於開發ios、android系統中的的native應用。結合了native和h5的優勢，具備性能好、靈活度高、接入成本低等特色。

項目建立

安裝命令行工具

首先安裝react-native-cli，安裝成功之後就能夠使用react-native的命令行進行建立、初始化、更新項目、運行打包服務等工做。

npm install -g react-native-cli
複製代碼

此處推薦安裝yarn代替npm，yarn是由Facebook提供的命令行工具，能夠加速模塊的下載速度。yarn安裝完之後就能夠使用yarn代替npm了。

npm install -g yarn
複製代碼

建立新項目

運行react-native init 命令，建立一個新項目

react-native init RNTestProject
複製代碼

環境準備

經過react-native init生成了項目之後須要進行開發環境的配置

• 安裝JDK得到java開發環境（因爲android底層是由java編寫，所以JDK必不可少）
• 安裝Android Studio，自動獲取編譯Android所需的依賴

安裝Android Studio

按照提示安裝完後打開android studio進入歡迎界面之後，須要配置編譯RN應用所需的Android SDK。

配置Android SDK

1. android studio歡迎界面右下角點擊"Configure"，選擇SDK Manager
2. 在」SDK Platforms「 tab下選擇Android 9.0(pie)，編譯 React Native 應用須要的是Android 9 (Pie)版本的 SDK
3. 勾選左下角的「Show Package Details」，勾選「Android SDK Platform 28」和「Intel x86 Atom_64 System Image」選項

   

4. 在「SDK Tools」的選項卡下，勾選左下角的「Show Package Details」，勾選"Android SDK Build-Tools"下的28.0.3版本。

配置環境變量

配置ANDROID_HOME環境變量，React Native 經過ANDROID_HOME環境變量來肯定 Android SDK 的安裝路徑，從而正常進行編譯。

將路徑:/Users/summer/Library/Android/sdk/platform-tools加在~/.bashrc中的export PATH=XXX的後面。確保~/.bash_profile中有以下配置

if test -f .bashrc ; then
source .bashrc
fi
複製代碼

這樣纔會在用戶登陸時先執行~/.bash_profile再執行~/.bashrc，修改在重啓shell後生效。

Android 設備

在運行RN應用以前須要準備一臺Android設備，設備能夠是真機也能夠是模擬器，此處我使用的是模擬器。

1. 在android studio右上角有一個安卓logo的圖標，點擊圖標
2. 點擊create vitrual device，選擇合適的機型
3. 選擇系統鏡像（RN 目前支持 android4.1 以上設備，鏡像的android版本須要在4.1以上），下載鏡像
4. 一路next 和finish就能夠了，成功之後就是這個樣子

虛擬設備安裝成功之後，可經過adb devices -l命令查看當前可用的設備

項目運行

設備安裝完成之後就能夠運行RN項目了，在工程目錄中運行react-native run-android命令

運行命令後會自動調起命令行運行一個打包服務，端口爲8081，用於提供js文件（開發模式中RN應用的前端文件是由8081端口加載；打包成apk包之後前端文件會被打進apk包）

run-android會自動構建apk包並安裝到可用的設備上，首次運行設備可能會出現紅屏錯誤，是由於沒有配置正確的打包服務。解決方式以下：

1. command + m 選擇 dev setting
2. 選擇debug server host & port for device
3. 填入[本機ip]:[8081]，點擊ok就能夠了

debug姿式

調試js代碼的姿式：

• command + m 打開開發者菜單，選擇"Debug JS Remotely"
• 點擊這個選項的同時會自動打開調試頁面 http://localhost:8081/debugger-ui
• 打開開發者模式，能夠開始在 Chrome 中調試 JavaScript 代碼
• Chrome 中並不能直接看到 App 的用戶界面，而只能提供 console 的輸出，以及在 sources 項中斷點調試 js 腳本

調試請求的姿式：

• 使用charles抓包工具
• 在android模擬器中打開setting，切換到proxy，選擇manual proxy configuration，而後填寫本機的ip和charles的端口
• 這樣全部從andriod模擬器發出去的請求都會被charles抓到，可查看請求的詳細信息

其餘工具

code push

code push是一個雲服務，能夠將更新（JS，HTML，CSS和圖片）發佈到這個倉庫上，而後用戶端app能夠查看並下載更新。所以JS，HTML，CSS和圖片的更新不用從新發包。

• code push命令行
• CodePush熱更新詳細接入教程

參考文件

• React Native 中文網