一步一步開發安卓下的react-native應用系列之第一個RN應用

        前期準備工做已經完成，接下來將正式進入開發了，請深呼吸下，呵呵。咱們首先寫個Hello World工程來練練手。
        在命令行上點右鍵，選擇以管理員身份運行。建議每次運行命令行的時候都用管理員身份運行，不然你常常會碰到權限之類的錯誤。
        再切換到你的開發目錄，保證你的網絡是順暢的，在命令行運行（圖1）：

react-native init HelloWorld

你就開始耐心的等待吧，通常都要等10多分鐘。這其中可能會遇到諸如shasum check failed此類錯誤（也基本上是網絡緣由致使的），從新運行下react-native init HelloWorld便可。

        項目初始化成功後，你會發如今你的開發目錄下多了一個HelloWorld目錄，這個就是你的RN工程了。接下來的事情就都是在這個目錄下操做。用記事本打開該目錄下的的android\app\build.gradle文件，找到

android {
    compileSdkVersion 22
    buildToolsVersion "23.0.1"
       defaultConfig {
        applicationId "com.poemproject"
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        } 
    }
    ...

將compileSdkVersion 後面的數字改爲你在上一篇環境配置中API本版號，好比我前面選的是23，這裏應該將22改爲23。將buildToolsVersion後面引號裏的數字改爲你的Android SDK Build-tools版本號，我前面選的是24，因此這裏把23.0.1改爲24.0.0。後面必定要加.0.0，不然就會找報錯，這個版本號對應Android SDK目錄下build-tools目錄下對應的目錄。

        查看android目錄下有無local.properties文件，若是沒有的話就用記事本新建一個，而後在裏面輸入：

sdk.dir=D\:\\JDKS\\android-sdk_r24.4.1-windows\\android-sdk-windows

將目錄改爲你實際android sdk的目錄便可

        鏈接你的手機，將USB鏈接選項改爲相機（PTP）鏈接。確保USB調試模式打開。而後在命令行運行adb devices再檢測下是否可以正常識別到你的設備，若是能正常識別就切換到HelloWorld目錄，而後運行：

react-native run-android

系統會默認另外打開一個命令行窗口運行package server（圖4）。（固然你也能夠先手動運行react-native start打開package server,而後再新開一個命令行運行react-native run-android也行)。又是一陣漫長的等待（在這裏若是你的安卓系統版本5.0或以上，react-native run-android默認會執行adb reverse tcp:8081 tcp:8081這個命令，這樣手機就能訪問開發服務器了，若是沒有執行，你就手動在命令行執行adb reverse tcp:8081 tcp:8081，而後再運行react-native run-android）。若是你的安卓版本低於5.0，就無須進行此操做，後續再來設置。在下載過程當中可能會由於網絡緣由致使gradle-2.4-all.zip文件（也多是其它版本）下載或者解壓失敗，你能夠按照報錯信息手動下載https://services.gradle.org/d...這個文件，而後解壓到相應目錄下（通常在C:\Users\用戶名\.gradle\wrapper\dists\gradle-2.4-all\隨機目錄下面），而後從新運行react-native init HelloWorld便可。固然最好的辦法是把gradle-2.4-all.zip放到本身的web服務器上,而後修改android\gradle\wrapper\gradle-wrapper.properties文件中distributionUrl後面的地址爲你web服務器上的文件地址，這能夠大大加快下載速度。

        閉上眼睛，心中默唸一百遍遍馬力馬力轟，再睜開眼，若是你是安卓5.0及以上系統，你就能在你手機上看到你第一個RN應用了（圖3），若是是5.0如下，嘿嘿，一個血紅血紅的界面，不過不要緊，咱們來糾正它。確保新開的那個命令行窗口中package server正在運行中（圖4），若是報錯中止了，你就在HelloWorld目錄下從新運行react-native start以打開此服務。而後確保手機開啓WIFI並跟電腦是在同一個網段內，必定要在同一網段內哦，而後搖動下你的手機，在彈出的菜單中選擇Dev Settings（圖2），而後選擇Debug server host& port for device，在輸入框裏輸入你電腦的ip地址和端口號8081（端口號是固定死的），好比192.168.10.1:8081，點肯定，再搖動下設備，在彈出的菜單裏選Reload，你就能夠看到正常的RN界面了（圖3）。編譯過程當中也可能會報一些莫名其妙的錯誤，你能夠根據報錯提示來解決，一些好比拒絕訪問等之類的錯誤等則只要從新運行下react-native run-android通常就能解決了。

        接下來咱們改點什麼東西吧，用記事本打開根目錄下的index.android.js，而後把Welcome to React Native!改爲Hello World!保存後，再搖一搖手機，點Reload，你就會發現歡迎的界面變了，是否是很簡單，是否是很爽，是否是很酷，哈！

        PS:必定要記得以管理員身份運行全部命令行哦