移動開發以前一般都是原生的語言來開發，Android開發是用Java語言，IOS的開發是Object-C或者Swift。那么對於開發一個App，至少需要兩套代碼、兩個團隊。對於公司來說，成本還是有的。然而現在有蠻多的公司開發App是基於React Native來開發的，這樣可以做到一個App，就是一套代碼，一個團隊。對於公司來說，無疑節約了成本。
《React Native開發》這系列的文章主要是記錄本人利用React Native學習開發的筆記，這一篇文章是第一篇《搭建React Native開發環境》。
1、安裝NodeJs
由於React Native中有一些工具，例如react-native-cli，是要npm來安裝，所以先得安裝NodeJs。對於NodeJs的版本要求是必須高於8.3。
打開NodeJs的官網下載頁面：https://nodejs.org/en/download/
直接下載最新版本，可以下載綠色解壓版本，也可以下載安裝版本，我本人喜歡綠色版本，同時系統是64位的，如圖：
解壓好后，將NodeJs的所在目錄配置到環境變量path中。
然后通過cmd命令設置npm鏡像，即：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --globa
2、安裝Python2
注意Python的版本必須是2.x系列的，Python的官網下載地址為：https://www.python.org/downloads/
也是直接下載2.x系列的最新版本，即：
下載下來的一個安裝文件，直接一步一步安裝即可，安裝好后，設置環境變量即可。
3、安裝 JDK
React Native要求JDK的版本為1.8，官網的下載地址為：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
選擇本系統合適的版本，即可，本人是Windows x64版本，即：
下載下來的一個安裝文件，直接一步一步安裝即可，安裝好后，設置環境變量即可。
4、安裝React-Native-Cli
React-Native-Cli工具是要通npm來安裝，即在cmd窗口中輸入如下命令：
npm install -g react-native-cli
5、安裝Android環境
安裝Android環境，首先先安裝Android Studio，下載地址為：http://www.android-studio.org/index.php/download
大家可以選擇最新版本，即：
下載下來的是一個可安裝程序，點擊安裝即可，在點擊“Next”過程，有一步需要指定Android SDK的路徑，如果之前電腦中已經存在SDK，可以指定該路徑，后續就可以不用下載SDK；由於本地沒有安裝過SDK的場景，這里暫時可以指定一個后續將保存SDK的路徑。
點擊“Finish”后，開始自動下載SDK，此時根據網速的快慢，決定這個步驟的時間的長短，下載完成后，則會進行Android Studio的歡迎畫面，如圖：
6、配置ANDROID_HOME環境變量
在安裝Android Studio時，設置了SDK的安裝目錄，該目錄就是ANDROID_HOME環境變量配置的目錄，配置好該環境變量后，需要將該目錄下的platform-tools目錄加入到path環境變量中，即：
%ANDROID_HOME%\platform-tools
7、創建項目
在cmd命令中執行如下如下命令，創建一個JGYW的項目，即：
react-native init JGYW
注意：在哪個目錄下執行該命令，就會在該目錄創建項目。
創建好項目后，就會在當前目錄下創建一個JGYW的目錄，然后進入該目錄，再執行：
react-native run-android
第一次執行該命令一般會下載很多的依賴文件可能比較長的時間.
如果出現如下錯誤：
說明SDK中缺少相應的版本，可以通過Android Studio來安裝相應的版本就行。
如果出現如下錯誤：
說明找不着運行設備，此時你可以啟動模擬器，你也可以將真機通過USB插入電腦中，同時根據不同的手機，將手機設置成開發者模式。
如果在真機上測試，打開程序后，會報錯誤，則需要在電腦中cmd命令行中執行如下命令：
adb reverse tcp:8081 tcp:8081
同時修改一下，App.js文件中如下內容，添加上“架構與我”字樣，即：
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!架構與我</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
然后在真機就可以看到如圖效果：
可以看修改后的效果了。
關注我
以你最方便的方式關注我：
微信公眾號：
