前言

按照React Native的迭代速度,使用官網的文檔,已經不能很順利的實現React Native和Android的有效整合。React Native最新版本 已經是0.39。為了更好的講解React Native和Android的整合我這里列出我本地的環境:

• Android Stuidio 2.2穩定版
• 64位win7操作系統
• 紅米note3雙網通普配版
• React Native 0.39

具體實踐

創建項目

這一步按照AS新建項目向導一步步完成即可,完成后。

• 在app module下的build.gradle文件的dependencies中添加React Native 依賴:compile “com.facebook.react:react-native:+”
• 修改Manifest文件:

<uses-permission android:name="android.permission.INTERNET" /><application ...><activity    android:name="com.facebook.react.devsupport.DevSettingsActivity" /></application>

注:compile SDK 和target SDK都是24(網上有文章講,使用的appcompat-v7支持包版本必須是23.0.1,compile SDK和target SDK也必須是23 。不過最新的也支持的)

compile 'com.android.support:appcompat-v7:24.2.1'

如果你出現下面的錯誤,可以降低版本到23.

Caused by: java.lang.IllegalAccessError: Method 'void android.support.v4.net.ConnectivityManagerCompat.<init>()' is inaccessible to class 'com.facebook.react.modules.netinfo.NetInfoModule' (declaration of 'com.facebook.react.modules.netinfo.NetInfoModule' appears in /data/app/com.milter.www.awesomeproject2-2/base.apk)

將Android項目變成React Native項目

其實整合的過程就是將一個原生的Android項目,轉換為滿足React Native結構格式的項目React Native項目結構。

• 創建并修改package.json文件 進入Android項目的根目錄,使用命令:

npm init

這個命令會引導你在ReactNativeWithNativeApp目錄下創建一個package.json文件。如圖所示:

接下來我們對package.json文件進行修改,修改部分如下:

 "scripts": {    "test": "echo "Error: no test specified" && exit 1"  }

修改為:

"scripts": {    "test": "echo "Error: no test specified" && exit 1" ,"start": "node node_modules/react-native/local-cli/cli.js start" }

修改后,我們在項目根目錄的命令行窗口中輸入命令:

npm start

就相當于執行如下命令:

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

隨著package.json文件的創建,我們的項目也變成了一個Node項目。

引入React Native 模塊

在項目根目錄下輸入如下的命令:

npm install --save react react-native

執行完后我們發現項目多了一個node_modules文件,react native依賴的庫都會在這里看到。

• 創建.flowconfig文件

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

這一命令的作用是將命令中url指向的.flowconfig文件下載到項目的根目錄。在上面的圖packagejson中可以看到這個下載后的文件。關于curl的講解請看curl詳解 注:如果你不想使用curl命令,你可以可以https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig拷貝里的內容存為.flowconfig文件。

創建RN程序

在根目錄下創建index.android.js文件,如果你是直接用react-native init demo(項目名),也可以拷貝index.android.js,具體代碼如下:

'use strict';import React from 'react';import {  AppRegistry,  StyleSheet,  Text,  View} from 'react-native';class HelloWorld extends React.Component {  render() {    return (      <View style={styles.container}>        <Text style={styles.hello}>Hello, World</Text>      </View>    )  }}var styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',  },  hello: {    fontSize: 20,    textAlign: 'center',    margin: 10,  },});AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

將React Native程序整合進Android項目

在項目根目錄的build.gradle中(注意:不是app模塊中的build.gradle文件)添加依賴。

allprojects {  repositories {      jcenter()     maven {          // All of React Native (JS, Android binaries) is installed from npm          url "$projectDir/../node_modules/react-native/android"      }  }

修改MainActivity內容,完整代碼如下:

public class MainActivity extends AppCompatActivity      implements DefaultHardwareBackBtnHandler {  private ReactRootView mReactRootView;  private ReactInstanceManager mReactInstanceManager;  private LifecycleState mLifecycleState          = LifecycleState.BEFORE_RESUME;  @Override  protected void onCreate(@Nullable Bundle savedInstanceState) {      super.onCreate(savedInstanceState);    /* 下面的版本判斷代碼官方文檔中沒有,      如果不添加,在6.0以上的Android版本中會報錯 */      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {          if (!Settings.canDrawOverlays(this)) {              Intent serviceIntent = new Intent(                      Settings.ACTION_MANAGE_OVERLAY_PERMISSION);              startActivity(serviceIntent);          }      }      mReactRootView = new ReactRootView(this);      mReactInstanceManager = ReactInstanceManager.builder()              .setApplication(getApplication())              .setBundleAssetName("index.android.bundle")              .setJSMainModuleName("index.android")              .addPackage(new MainReactPackage())              .setUseDeveloperSupport(BuildConfig.DEBUG)              .setInitialLifecycleState(mLifecycleState)              .build();//下面代碼中的"HelloWorld"來自index.android.js文件中最后一行代碼      mReactRootView.startReactApplication(mReactInstanceManager,              "HelloWorld", null);      setContentView(mReactRootView);  }  @Override  protected void onPause() {      super.onPause();      mLifecycleState = LifecycleState.BEFORE_RESUME;      if (mReactInstanceManager != null) {          mReactInstanceManager.onHostPause();      }  }  @Override  protected void onResume() {      super.onResume();      mLifecycleState = LifecycleState.RESUMED;      if (mReactInstanceManager != null) {          mReactInstanceManager.onHostResume(this, this);      }  }  @Override  protected void onDestroy() {      super.onDestroy();      mReactRootView.unmountReactApplication();      mReactRootView = null;      if (mReactInstanceManager != null) {          mReactInstanceManager.destroy();      }  }  @Override  public void onActivityResult(int requestCode, int resultCode,                               Intent data) {      if (mReactInstanceManager != null) {          mReactInstanceManager.onActivityResult(this,requestCode,                  resultCode, data);      }  }  @Override  public void onBackPressed() {      if (mReactInstanceManager != null) {          mReactInstanceManager.onBackPressed();      }      else {          super.onBackPressed();      }  }  @Override  public void invokeDefaultOnBackPressed() {      super.onBackPressed();  }}

運行配置

使用npm start命令運行項目,然后使用

react-native run-android

如果報錯,請往下看。如果出現如下錯誤:

java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so

這個錯誤的原因是React Native提供的libreactnativejni.so文件是32位,而我們的項目中用了一些不兼容的64位so文件,二者混在一起產生的。解決的辦法就是禁止使用那些64位的so文件。 第一,在項目根目錄下的gradle.properties文件最后加上這樣一句:

android.useDeprecatedNdk=true

第二、在app module下的build.gradle文件中添加如下內容:

android {    ...    defaultConfig {        ...        ndk{            abiFilters "armeabi-v7a", "x86"        }        ...    }...}

第三、找出不兼容的64位so文件并禁止它們 在目錄…ReactNativeWithNativeAppappbuildoutputsapk下找到app-debug.apk,并把它解壓,查看一下,解壓后的文件的lib目錄下有沒有這個目錄: arm64-v8a 如果有這個目錄,看看里面的so文件,都是我們要禁止的,禁止的方法如下:假設里面有一個 1.so文件,我們要在app module下的build.gradle文件中做如下修改:

android {    ...    defaultConfig {        ...        ndk{            abiFilters "armeabi-v7a", "x86"        }        packagingOptions {            exclude "lib/arm64-v8a/1.so"                    }        ...    }...}

好了,整合就說完了,請大家持續關注哦,現在出項目實戰了。