初次接觸React Native

 在Windows下初次接觸React Native

React Native已經出來快一年時間了,但是遲遲沒有支持Android,最近看羣裏討論的挺火,自己也研究了一下。

React Native Android

安裝JDK

Java官網之JDK下載列表下載JDK並安裝。請注意選擇x86還是x64版本。我在這裏直接接受了 @天地之靈_鄧鋆 的推薦將JDK的bin目錄加入到了系統PATH環境變量。注意:下載鏈接不能直接使用,需要先接受協議(這裏有存入cookies),可以通過Java官網之JDK下載列表下載JDK。

設置環境變量PATH:jdk的位置。例如:(PATH => D:\Program Files\Java\jdk1.8.0_60\bin)

安裝Android SDK

單獨安裝Android SDK,在牆的環境下,爲了速度我選擇了使用androiddevtools

設置環境變量ANDROID_HOME:Android SDK Manager的位置 例如:(PATH => D:\Program Files\Android SDK Tools)
設置環境變量PATH:例如:(PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

安裝node.js(網上有的說裝python,vc2005,和安裝git我貌似沒裝也可以實現React Native的效果)

從Node官網上下載,我當前使用的是V7.1.0Current傻瓜式安裝即可

      安裝後測試是否成功,可以通過node -v的命令來測試NodeJS是否安裝成功

        

安裝React native命令行工具(react-native-cli)

  npm install -g react-native-cli
 重要的東西差不多好了(有的用Git clon對於沒有安裝Git的完全沒必要)

接下來準備開始創建RN項目

     1. 你可以先創建個文件夾命令行找到這個文件夾,然後輸入輸入react-native init MyProject


           2.可能需要等一會,創建完成後文件目錄是這樣的,說明已經創建RN項目成功


     3.在命令行中進入項目目錄,輸入react-native start,等待一段時間如果成功,

 用瀏覽器訪問http://localhost:8081/index.android.bundle?platform=android,可以訪問表示服務器端已經可以了。


    4.剛剛運行的命令行窗體不要關閉,重新啓動一個新的命令行窗體,進入項目目錄MyProject

    由於翻牆下載太浪費時間,找到Gradle下載gradle-2.4-all.zip下載到本地,然後找到項目目錄E:\ReactNative\MyProject\android\gradle\wrapper裏的

gradle-wrapper.properties文件用編輯器打開修改爲你下載的gradle的路徑即可

distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip
distributionUrl=file:///E:/BaiduNetdiskDownload/Gradle/gradle-2.4-all.zip

  如果出現下面說明已經成功導入gradle:


   5.安裝並啓動android模擬器,然後再輸入react-native run-android

  我用的是AndroidStudio自帶的模擬器一開始用的夜神的模擬器報了Could not install the app on the device, read the error above for details.
  Make sure you have an Android emulator running or a device connected and have


是沒有adb調試橋,找不到驅動,找了好久就是沒有結果,

 實在沒辦法就用原生模擬器還可以運行,運行結果如下:

簡單修改添加文字:在E:\ReactNative\MyProject\android\目錄下找到index.android.js用編輯器打開即可修改,添加文字效果如下:


發佈了21 篇原創文章 · 獲贊 19 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章