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

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

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

緣由可能有3個:android

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

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

  3. 版本問題,Nodejs版本、React Native 版本、Android SDK 版本。。。。等等react-native

問題老是有解決的方法,下面我說一下我踩到的坑:網絡

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

沒辦法只能cancel掉,而後測試

    1.npm initui

    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,會從新安裝就能夠看到新的名稱和圖標了。

相關文章
相關標籤/搜索