http://blog.csdn.net/asmcvc/article/details/51683799

http://blog.csdn.net/asmcvc/article/details/51683799

Windows下使用AndroidStudio+ReactNative開發Android應用

2016-06-15 17:19  1988人閱讀  評論(1)  收藏  舉報

  分類： Android彙總（40） 

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。

一、環境配置 1、其他環境 如果之前有用 AndroidStudio開發過安卓應用， Java環境和AndroidSDK都應該安裝過了，否則需要安裝一下。 另外需要安裝 Node.js(後面需要使用npm)。

2、安裝react-native

1) 直接使用npm安裝

在cmd指令工具中執行以下指令，注意并非 install React-native，裝了react-native在後面init項目的時候會報錯，需要卸掉再重裝。

npm install -g react-native-cli

2) 先clone代碼再npm安裝

git clone  https://github.com/facebook/react-native.git 代碼clone成功後，進入目錄react-native-cli下，例如我的是 F:\opensource\react-native\react-native-cli，輸入指令行： npm install -g

安裝好之後，可以指令行下就有 react-native指令了

二、建立ReactNative項目

指令行： react-native init HelloAndroid

該指令會去拉取下載下傳ReactNative源代碼和相關依賴元件，然後建立一個包含了ios和android的項目:

在AndroidStudio上打開HelloAndroid/android目錄，等待gradle建構完畢後運作HelloAndroid程式（稍久），可以看到以下ReactNatibe經典報錯UI：

06-15 11:27:15.440 4649-4649/com.helloandroid E/unknown:React: Exception in native call from JS
java.lang.RuntimeException: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
    at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:860)
    at com.facebook.react.ReactInstanceManagerImpl.access$700(ReactInstanceManagerImpl.java:98)
    at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:194)
    at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:177)
    at android.os.AsyncTask$2.call(AsyncTask.java:288)
    at java.util.concurrent.FutureTask.run(FutureTask.java:237)
    at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:231)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587)
    at java.lang.Thread.run(Thread.java:841)
 Caused by: java.util.concurrent.ExecutionException: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
    at com.facebook.react.common.futures.SimpleSettableFuture.get(SimpleSettableFuture.java:68)
    at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:831)
        ... 9 more
 Caused by: java.lang.RuntimeException: Could not connect to development server.
Try the following to fix the issue:
Ensure that the packager server is running
Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device
If your device is on the same Wi-Fi network, set 'Debug server host & port for device' in 'Dev settings' to y
    at com.facebook.react.bridge.ReactBridge.loadScriptFromAssets(Native Method)
    at com.facebook.react.bridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:32)
    at com.facebook.react.bridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:148)
    at com.facebook.react.ReactInstanceManagerImpl$4.call(ReactInstanceManagerImpl.java:851)
    at com.facebook.react.ReactInstanceManagerImpl$4.call(ReactInstanceManagerImpl.java:832)
    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$1.run(MessageQueueThreadImpl.java:73)
    at android.os.Handler.handleCallback(Handler.java:733)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)
    at android.os.Looper.loop(Looper.java:136)
    at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:197)
        ... 1 more      

這是因為我們還未啟動react-native的服務。

指令行中進入項目目錄，輸入react-native start進行建構，等待一段時間。 react-native start 注意這裡不是使用run-android，run-android适用于直接在機器上運作調試app。

建構完畢，在浏覽器中通路 http://localhost:8081/index.android.bundle?platform=android， 如果可以通路表示伺服器端已經可以了。

我們搖一搖手機，點選 Dev Settings後，點選 Debug server host & port for device,設定IP和端口。

這裡的IP是電腦的IP，端口号固定8081。

設定完成後，回到空白頁面，再次搖一搖手機，選擇Reload JS，程式就運作起來，出現Welcome to React Native！

這個資訊是在項目目錄下 index.android.js裡的，可以打開看看：

class HelloAndroid extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.android.js
        </Text>
        <Text style={styles.instructions}>
          Shake or press menu button for dev menu
        </Text>
      </View>
    );
  }
}      

注意 Android5.0以上版本指令方式： 打開Android SDK目錄 xxx\Android\sdk\platform-tools。在目前檔案路徑呼出指令行，輸入： adb reverse tcp:8081 tcp:8081 點選Reload JS 即可成功拉取ReactNative bundle。

參考：

React Native for Android Windows環境搭建 史上最詳細Windows版本搭建安裝React Native環境配置 React-Native學習指南 React Native技術周報