一、React Native教程介紹

二、植入流程：

0、準備工作及一些提示性：

本人系統為Win10系統，安裝了visual studio2015，node.js4.1版本，curl，ssl，python2.7，Android Studio2.1版本及buildTools。

本人從github上down下來react-native，不過因本機之前曾經裝過react-native-cli，所以報錯。

本人本來打算卸掉react-native-cli重新編譯react-native以作為全域性性的react-native，但未獲成功（可能中間哪步錯了）。

注意：一個相容性錯誤（react-native0.17.+和v7:23.2.+相沖突）

E/AndroidRuntime( 1530): Process: com.example.zhejiang.testapplication, PID: 1530

E/AndroidRuntime( 1530): java.lang.RuntimeException: An error occured while executing doInBackground()

E/AndroidRuntime( 1530):     at android.os.AsyncTask$3.done(AsyncTask.java:300)

E/AndroidRuntime( 1530):     at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:355)

E/AndroidRuntime( 1530):     at java.util.concurrent.FutureTask.setException(FutureTask.java:222)

E/AndroidRuntime( 1530):     at java.util.concurrent.FutureTask.run(FutureTask.java:242)

E/AndroidRuntime( 1530):     at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:231)

E/AndroidRuntime( 1530):     at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1112)

E/AndroidRuntime( 1530):     at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:587)

E/AndroidRuntime( 1530):     at java.lang.Thread.run(Thread.java:864)

E/AndroidRuntime( 1530): Caused by: java.lang.IllegalAccessError: tried to access method android.support.v4.net.ConnectivityManagerCompat.<init>:(Lcom/facebook/react/bridge/ReactApplicationContext;)V from class com.facebook.react.modules.netinfo.NetInfoModule

E/AndroidRuntime( 1530):     at com.facebook.react.modules.netinfo.NetInfoModule.<init>(NetInfoModule.java:57)

E/AndroidRuntime( 1530):     at com.facebook.react.shell.MainReactPackage.createNativeModules(MainReactPackage.java:55)

E/AndroidRuntime( 1530):     at com.facebook.react.ReactInstanceManagerImpl.processPackage(ReactInstanceManagerImpl.java:692)

E/AndroidRuntime( 1530):     at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:633)

E/AndroidRuntime( 1530):     at com.facebook.react.ReactInstanceManagerImpl.access$600(ReactInstanceManagerImpl.java:78)

E/AndroidRuntime( 1530):     at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:169)

E/AndroidRuntime( 1530):     at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:155)

E/AndroidRuntime( 1530):     at android.os.AsyncTask$2.call(AsyncTask.java:288)

E/AndroidRuntime( 1530):     at java.util.concurrent.FutureTask.run(FutureTask.java:237)

E/AndroidRuntime( 1530):     ... 4 more

解決方法：將support包版本改為

compile 'com.android.support:appcompat-v7:23.1.+'

1、在build.gradle中加入：

compile 'com.facebook.react:react-native:0.20.+'

2、修改minSdkVersion：

defaultConfig {
 ...
 minSdkVersion 16
 ...
}

3、增加網路許可權：

<uses-permission android:name="android.permission.INTERNET" />

4、新增原生程式碼：

package 
 
com.zhejiangdaily;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import com.facebook.react.LifecycleState;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
/**
 * Created by zhejiang on 2016/3/24 0024.
 */
public class FirstReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
    private ReactRootView mReactRootView;
    private ReactInstanceManager mReactInstanceManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
mReactRootView = new ReactRootView(this);
mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();
mReactRootView.startReactApplication(mReactInstanceManager, "MyAwesomeApp", null);
setContentView(mReactRootView);
}

    @Override
public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
}

    @Override
protected void onPause() {
        super.onPause();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onPause();
}
    }

    @Override
protected void onResume() {
        super.onResume();
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onResume(this, this);
}
    }

    @Override
public void onBackPressed() {
        if (mReactInstanceManager != null) {
            mReactInstanceManager.onBackPressed();
} else {
            super.onBackPressed();
}
    }

    @Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
            mReactInstanceManager.showDevOptionsDialog();
            return true;
}
        return super.onKeyUp(keyCode, event);
}
}

5、把JS程式碼新增到原生應用：

在工程根目錄，執行以下三個命令：

npm init

npm install --save react-native

curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig

上面的程式碼會建立一個node模組，然後react-native作為npm依賴新增。現在開啟新建立的package.json檔案然後在scripts欄位下新增如下內容：

"start": "node node_modules/react-native/local-cli/cli.js start"

複製並貼上下面的這段程式碼到你工程根目錄下的index.android.js——這是一個簡單的React Native應用：

'use strict';

var React = require('react-native');
var {
  Text,
  View
} = React;

class MyAwesomeApp extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.hello}>Hello, World</Text>
      </View>
    )
  }
}
var styles = React.StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
  hello: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

React.AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);

6、開啟伺服器，編譯包：

react-native start

gradlew.bat installDebug/assembleDebug

三、遇到的問題：

1、undefined is not an object (evaluating 'screenPhysicalPixels.width')

問題：所引用的react native版本過低，出錯時所引用版本是0.17+

解決方法：

dependencies {
    compile "com.facebook.react:react-native:0.20.+"
}

方法二：（沒試過）

1. Set "react-native": "^0.20.0", in package.json
2. Delete node_modules
3. Run react-native upgrade (updates android/app/build.gradle among others)
4. Uninstall app on my phone
5. react-native run-android

2、ReferenceError:Can't find variable:_fbBatchedBridge(line 1 in the generated

問題分析：Android手機和電腦伺服器不在同一個網路下面

解決方法：

(Android 5.0及以上)使用adb reverse命令

首先把你的裝置通過USB資料線連線到電腦上，並開啟USB除錯（關於如何開啟USB除錯，參見上面的章節）。

1. 執行adb reverse tcp:8081 tcp:8081
2. 不需要更多配置，你就可以使用Reload JS和其它的開發選項了。

(Android 5.0以下)通過Wi-Fi連線你的本地開發伺服器

1. 首先確保你的電腦和手機裝置在同一個Wi-Fi環境下。
2. 在裝置上執行你的React Native應用。和開啟其它App一樣操作。
3. 你應該會看到一個“紅屏”錯誤提示。這是正常的，下面的步驟會解決這個報錯。
4. 搖晃裝置，或者執行adb shell input keyevent 82，可以開啟開發者選單。
5. 點選進入Dev Settings。
6. 點選Debug server host for device。
7. 輸入你電腦的IP地址和埠號（譬如10.0.1.1:8081）。在Mac上，你可以在系統設定/網路裡找查詢你的IP地址。在Windows上，開啟命令提示符並輸入ipconfig來查詢你的IP地址。在Linux上你可以在終端中輸入ifconfig來查詢你的IP地址。
8. 回到開發者選單然後選擇Reload JS。

3、Unable to download JS bundle

問題分析：js名字（包括在package.json中）和React Native預設不一致。我當時的情況是js模板命名為index.js，在package.json中也是如此。但是執行時伺服器提示

request:/index.android.bundle?platform=android&dev=true&hot=false

解決方法：將index.js改名為index.android.js，並且在package.json中也改名。重新執行gradlew.bat assembleDebug打包，並且重啟伺服器，執行react-native start

4、gradle編譯 java.lang.OutOfMemoryError: GC overhead limit exceeded

問題分析：JVM7所設定的預設快取大小太小導致編譯失敗。需要設定虛擬機器堆記憶體空間大小，避免在編譯期間OOM

解決方法：

在build.gradle中新增：

android {

 ...
 dexOptions {
    incremental true
javaMaxHeapSize "4g"
 }
 ...
}

修改gradle.properties：（增加兩處，當前主module下和node_modules下，搜一下全域性的-Xmx）

org.gradle.jvmargs=-Xmx3096m -XX:MaxPermSize=1024m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8

問題分析：Android方法數65K限制，需要DEX分包

解決方法：（在build.gradle中修改）

dependencies { 
... 
   compile 'com.android.support:multidex:' 
   ... 
}

defaultConfig { 
   ... 
multiDexEnabled true 
... 
}

android:name="android.support.multidex.MultiDexApplication"

最後，重新build。

6、com.android.build.api.transform.TransformException: com.android.builder.packaging.DuplicateFileException: Duplicate files copied in APK lib/armeabi/libwebp.so

問題分析：so檔案重複了（ImageLoader增加的WebP和Fresco本身所帶有的WebP所衝突）

解決方法：刪除衝突檔案

寫在最後的話：

轉載請轉自：

如有問題，請聯絡QQ838704711