寫在前面
在開始之前，先說下選擇react-native的背景原因
最近一年來，公司為了節省開發成本，以及降低維護成本，指派我開始做起前端開發app的工作，我和公司的小伙伴們就開始了漫長的app開發之旅；為了更好的結合現在使用的技術棧進行開發（現使用vue系列框架），剛開始選擇了cordova結合vue做app開發，也上線了一款應用（商城類項目），流暢度在ios設備上以及中高端android手機上還算流暢，當時也想過就確定使用這個技術棧進行app開發了，不過后來又有了新的變數。
由於公司是屬於倉儲類型的公司，平常倉庫人員揀貨理貨都是使用手持PDA進行作業，所以公司要求做一款針對PDA設備的應用，由於PDA設備系統比較老（android4.2.2），且性能低下，剛一開始還是使用cordova+vue進行項目開發，在pda上安裝測試版app的時候發現cordova使用的webview並不能很好的兼容這種低端設備，也是嘗試了主流的webview，包括騰訊的X5和Crosswalk兩個webxiew，都不能很好的解決適配問題，由於項目已用vue寫好，所以只能找其它可以提供原生webview技術；還好皇天不負有心人，最終使用hbuilder的打包平台解決了兼容性問題，重新寫了與原生交互的方法之后項目終於上線了。
如上所言，后來用hbuilder打包的應用雖然順利上線了，但是使用hbuilder雲打包並不是最佳的選擇，比如說前一段時間項目修改后要上線，然后提交雲打包，但是打包下來的包在PDA上安裝不上，和hbuilder的團隊溝通了兩天才解決掉，當時就感覺靠人不如靠自己啊，雖說使用hbuilder也可以實現線下打包，但是經過這件事之后我對他們失望了，加上打包出來的app性能優化上也有一定的難度，所以我決定是時候改變寫什么了，經過我的提議，使用react-native重構當前項目被提上了日程。
react-native技術的優越性這里就不多說了，網上有很多對次技術棧的說明以及和其它技術棧對比的文章，本次系列文章用來記錄開發過程中的一些心得，和遇到的坑，在此記錄，以防后邊又掉進坑里。
（一）react-native開發系列之開發環境搭建MAC環境配置
（二）react-native開發系列之windows開發環境配置
（五）react-native開發系列之原生交互
（六）react-native開發系列之打包發行app
雖說現在重構的項目只用在android設備上，但是本着技術儲備的初心，這次項目重構也會考慮到ios設備的兼容，所以這里的開發環境首先選擇的是在mac的系統上搭建，在基礎開發環境搭建完善之后，會獨立出來在windows系統上開發，所以也會搭建一套基於windows系統的開發環境，只用於開發android應用。
Mac環境搭建
因為窮，沒錢買Mac，所以就在電腦上安裝了個虛擬機湊合使用；網上有很多windows安裝os虛擬機的教程，可自行搜索安裝，我這里使用的是VMware，安裝的系統版本是10.13，如下圖
在安裝好系統之后，在新系統上安裝運行react-native的必要環境，Mac安裝node.js、yarn相對於windows系統比較簡單一點，下面開始安裝
1、安裝Homebrew
Homebrew是Mac的一個包管理工具，可以使用這個工具安裝開發工具，首先打開命令行工具，輸入以下代碼安裝Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
然后一路回車，會讓輸入密碼，這個密碼是登陸系統的密碼，輸入密碼之后回車開始安裝，安裝完成之后如下圖
然后就可以使用Homebrew安裝node.js，react-native要求node.js版本較高，使用以下命令直接安裝即可
brew install node
安裝完成之后使用node -v查看一下node.js的版本，我這里安裝的版本是10.1.0
安裝yarn
brew install yarn
2、安裝jdk
由於還要在Mac上開發android，所以還需要安裝jdk，下載Mac版jdk1.8安裝包，安裝jdk，安裝完成之后還需要配置下jdk的環境變量，方法如下
（1）打開命令行窗口，如果是第一次配置環境變量使用touch .bash_profile，如果之前已經生成過.bash_profile文件，則可以直接修改.bash_profile文件，打開.bash_profile文件使用open -e .bash_profile，因為我這里已經有這個文件了，現在使用open -e .bash_profile打開如下
我這里是已經配置好的環境變量，如上圖內容，在.bash文件里輸入
JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_172.jdk/Contents/Home CLASSPAHT=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar PATH=$JAVA_HOME/bin:$PATH: export JAVA_HOME export CLASSPATH
然后保存，關閉此窗口，使用source .bash_profile命令使剛剛配置的環境變量生效，輸入java -version查看jdk是否已經安裝成功，如果成功如下
3、安裝android-sdk
要想開發Android只有jdk還是不行的，還需要android-sdk
下載skd for Mac，點擊這里可下載
下載后解壓，命令行進入tools文件夾，輸入./android sdk，打開sdk-manager，如下圖
然后就是下載sdk build-tools和需要版本的API啦，接下來還需要配置下環境變量，同jdk的環境變量配置類似，由於已經創建過.bash_profile文件了，此處可直接打開配置文件，使用open -e .bash_profile命令打開配置文件，輸入以下內容
export PATH=${PATH}:/soft/android-sdk-macosx/platform-tools
export PATH=${PATH}:/soft/android-sdk-macosx/tools
export CLASSPATH
export PATH
輸入source .bash_profile使配置生效，驗證skd，輸入adb，出現以下內容說明配置成功
4、安裝xcode
以上幾步基本都是搭建android環境所需的，接下來再說下ios的開發所需環境，安裝xcode
由於是黑蘋果，無法從AppStore直接下載xcode，這里提供下載地址，版本為9.2，直接雙擊打開安裝包即可安裝
5、初始化react-native項目
（1）全局安裝react-native-cli
npm install react-native-cli -g
（2）初始化項目，這里以使用0.44.3版本為例
react-native init RnDemo --version 0.44.3
稍等一會就會下載好，並且自動使用yarn下載好了依賴
進入項目目錄下面cd RnDemo，然后react-native run-android，或者react-native run-ios，剛下載下來如果不更改配置的話一般情況下run-android都會報錯，具體會出現什么報錯，后邊會另有文章提到，這里不在一一列出來，這里是我調試好的項目配置，下載下來直接運行直接可用。
（3）react-native run-ios
在已經安裝了xcode的情況下，直接運行react-native run-ios會自動開啟xcode的ios模擬器，稍等一下就會看到在模擬器上安裝的應用，並且會自動打開，如下圖
這樣去修改文件里的index.ios.js然后刷新模擬器（win+r）就會看到頁面的變化。
（4）react-native run-android
這里以android真機為例，將Android手機插入電腦，輸入adb devices查看是否連接成功，如下圖所示即表示連接成功
上面那一串就是所連接的設備
然后運行react-native run-android
* What went wrong: A problem occurred configuring project ':app'. > SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
額，報錯了，說SDK位置不對，目前我也不清楚原因是什么，解決方法是在android目錄下面新建一個名為local.properties的文件，里面內容指向SDK地址，如下代碼
sdk.dir=/soft/android-sdk-macosx // 自己的sdk位置
然后重新運行react-native run-android
依然報錯，此時debug包已經打好了，只是無法安裝到手機上，此時有兩種解決方式可以選擇，一種是下面的文件目錄下的安裝包通過其它方式安裝打手機
另外一種方式是修改android的配置信息，修改內容如下
修改完這三個文件之后重新run-android就可以成功了
現在ios模擬器和Android真機都運行起來了，就可以愉快的進行開發了。windows環境配置僅用於開發android，下篇說下windows環境下的react-native配置。