第一個React Native程序踩到的那些坑

絕不誇張的說用React Native寫一個Hello World ！程序是我碰到最複雜的Hello World。網絡上的有關的環境搭建相關的文檔也不少，可是老是有這樣那樣的問題。

官方中文版的安裝文檔，windows環境搭建文字教程

緣由可能有3個：

  1. 這個東西最先仍是在Mac機上開發的，可能支持的會好一點，windows平臺時間短。

  2. 網絡被牆或不穩定，註冊npm淘寶鏡像會快不少，可是不能徹底解決問題。

  3. 版本問題，Nodejs版本、React Native 版本、Android SDK 版本。。。。等等

問題老是有解決的方法，下面我說一下我踩到的坑：

1、按照文檔上說的一路往下走，到react-native init MyProject 這一步可能會用問題，首先MyProject不能大寫開頭，其次這一步可能會讓你無限的等下去，直到絕望，

沒辦法只能cancel掉，而後

    1.npm init

    2.npm install react-native --save

    3.node -e "require('react-native/local-cli/cli').init('.','myproject')"

2、 運行react-native run-android到這裏多是問題最多的。

   1.文檔上面推薦用Genymotion模擬器測試，我也試過了，不簡單並且很慢，最後仍是用本身的手機鏈接，具體怎麼打開USB調試開關可能每一個設備還不同。我用的是小米Note，問題在GitHub有人回答，最重要的一點是：go back to Developer options, scroll down to find Turn on MIUI optimization and disable it. Your phone will be rebooted。關閉到全部的電腦上的手機助手鍊接。用命令adb devices 能看到則說明鏈接成功，注意不能同時打開模擬器和手機設備。

   2.在安裝Android SDK時，Tools/Android SDK Build-tools (23.0.1)（這個必須版本嚴格匹配23.0.1），這個文檔上面也說了，必定要注意，react-native模板配置文件裏面默認的是23.0.1版本的。

最後上一張安裝成功的圖片

 

3.修改圖標和App名稱，修更名稱：..\android\app\src\main\res\values\strings.xml文件裏面的名稱。修改圖標：..\android\app\src\main\res目錄下面文件夾裏面的png文件，替換圖標文件，注意圖片尺寸和名稱不能改變，以後在項目目錄下面要運行 react-native start ，必定要運行這個命令，而後新開命令窗口在項目目錄下面再運行 react-native run-android，會從新安裝就能夠看到新的名稱和圖標了。