Android現(xiàn)有工程接入RN開發(fā)

前言

將一個(gè)現(xiàn)有工程接入rn開放，中間會有不少坑，今天記錄下步驟和遇到的幾個(gè)坑和解決辦法

1 :用AndroidStudio創(chuàng)建一個(gè)工程，我的工程名稱：AndroidInstallRn

2:打開命令行終端，進(jìn)入AndroidInstallRn工程里面

3：輸入命令，

1: npm init
坑：Press ^C at any time to quit. 出現(xiàn)這一行以后開始輸入一些配置信息，name不能大寫。

20161014091825866.png

2:npm install --save react react-native
坑：執(zhí)行的時(shí)候報(bào)錯(cuò)
npm WARN react-native@0.43.4 requires a peer of react@16.0.0-alpha.6 but none was installed.
解決辦法：執(zhí)行 npm i -S react@16.0.0-alpha.6 找到項(xiàng)目中package.json文件，確認(rèn)react是剛才安裝版本就不用管了

"dependencies": {
    "react": "^16.0.0-alpha.6",
    "react-native": "^0.43.4"
  }

3：在package.json的scripts中加入字段

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

這時(shí)候package.json應(yīng)該張這樣

{
  "name": "androidinstallrn",
  "version": "1.0.0",
  "description": "rn test",
  "main": "index.android.js",
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "keywords": [
    "test",
    "rn"
  ],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.0.0-alpha.6",
    "react-native": "^0.43.4"
  }
}

4：繼續(xù)在命令行執(zhí)行

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

5:把最簡單的rn代碼復(fù)制到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);

4:修改app工程

1：在你的app中 build.gradle 文件中添加 React Native 依賴:

dependencies {
     ...
     compile "com.facebook.react:react-native:+" // From node_modules.
 }

你想要指定構(gòu)建時(shí)的 React Native 版本，請用 npm 已下載的本地 React Native 的版本號替換 +
2:在項(xiàng)目的 build.gradle 文件中為 React Native 添加一個(gè) maven 依賴的入口，必須寫在 "allprojects" 代碼塊中:

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

確保依賴路徑的正確！以免在 Android Studio 運(yùn)行Gradle同步構(gòu)建時(shí)拋出 “Failed to resolve: com.facebook.react:react-native:0.x.x" 異常。
3:接著，在 AndroidManifest.xml 清單文件中聲明權(quán)限:

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

4：修改MainActivity

public class MainActivity extends AppCompatActivity 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();

        // 注意這里的HelloWorld必須對應(yīng)“index.android.js”中的
        // “AppRegistry.registerComponent()”的第一個(gè)參數(shù)
        mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

        setContentView(mReactRootView);
    }
    @Override
    protected void onPause() {
        super.onPause();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostPause(this);
        }
    }

    @Override
    protected void onResume() {
        super.onResume();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostResume(this,this);
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();

        if (mReactInstanceManager != null) {
            mReactInstanceManager.onHostDestroy(this);
        }
    }

    @Override
    public void invokeDefaultOnBackPressed() {
        super.onBackPressed();
    }
    @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:到這基本完成，在命令行運(yùn)行

npm start

啟動rn服務(wù)
坑：這個(gè)時(shí)候 運(yùn)行npm start可能會報(bào)錯(cuò)：

 Loading dependency graph... ERROR  Packager can't listen on port 8081
Most likely another process is already using this port
Run the following command to find out which process:

   lsof -i :8081 

Then, you can either shut down the other process:

   kill -9 <PID> 

or run packager on different port.

See http://facebook.github.io/react-native/docs/troubleshooting.html
for common problems and solutions.

這是8081端口被占用了，rn默認(rèn)啟動端口是8081解決辦法

$  lsof -i :8081 

$ kill - 9 <進(jìn)程id>

6：啟動成功。在studio上運(yùn)用app
坑 app報(bào)錯(cuò)

FATAL EXCEPTION: AsyncTask #1
 Process: com.example.wuxiaoyong.androidinstallrn, PID: 3121                         java.lang.RuntimeException: An error occurred while executing doInBackground()
at android.os.AsyncTask$3.done(AsyncTask.java:330)
at java.util.concurrent.FutureTask.finishCompletion(FutureTask.java:354)
at java.util.concurrent.FutureTask.setException(FutureTask.java:223)
at java.util.concurrent.FutureTask.run(FutureTask.java:242)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:255)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1133)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:607)
at java.lang.Thread.run(Thread.java:776)
Caused by: java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so
at com.facebook.soloader.SoLoader.loadLibraryBySoName(SoLoader.java:213)
at com.facebook.soloader.SoLoader.loadLibrary(SoLoader.java:178)
at com.facebook.react.bridge.JSCJavaScriptExecutor.<clinit>(JSCJavaScriptExecutor.java:25)
at com.facebook.react.bridge.JSCJavaScriptExecutor$Factory.create(JSCJavaScriptExecutor.java:20)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:183)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:169)
at android.os.AsyncTask$2.call(AsyncTask.java:316)
at java.util.concurrent.FutureTask.run(FutureTask.java:237)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:255) 
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1133) 
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:607) 
at java.lang.Thread.run(Thread.java:776)

問題原因：
Android不能同時(shí)加載32和64位本機(jī)庫。 如果您至少有一個(gè)依賴庫使用ARM64支持編譯的擴(kuò)展，而另外一些依賴庫僅支持ARM32，就會出現(xiàn)問題。 系統(tǒng)將檢測ARM64依賴關(guān)系，加載它，然后拒絕加載僅ARM32的so庫，就可能導(dǎo)致應(yīng)用程序崩潰。
??項(xiàng)目中只有l(wèi)ibimagepipeline.so有arm64-v8a支持編譯的擴(kuò)展，Smartisan M1手機(jī)發(fā)現(xiàn)有64位的本機(jī)庫，就不會再去加載32位的本機(jī)庫，所以在Native Libraries installed區(qū)就只能看到libimagepipeline.so一個(gè)so庫。也因此會報(bào)我們開篇提到的兩個(gè)缺省so庫的Error，也因此回復(fù)了為什么只有一個(gè)so庫的問題。
解決辦法：在你的app中 build.gradle 中加入

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

OK 解決這個(gè)之后，又一個(gè)坑，又一個(gè)報(bào)錯(cuò)，真是一步一個(gè)坑

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/data/com.example.wuxiaoyong.androidinstallrn/files/instant-run/dex/slice-com.facebook.react-react-native-0.20.1_241a9e4c0e7198091bd2bc50912d161a24710fbf-classes.dex)
at com.facebook.react.modules.netinfo.NetInfoModule.<init>(NetInfoModule.java:55)
at com.facebook.react.shell.MainReactPackage.createNativeModules(MainReactPackage.java:67)
at com.facebook.react.ReactInstanceManagerImpl.processPackage(ReactInstanceManagerImpl.java:793)
at com.facebook.react.ReactInstanceManagerImpl.createReactContext(ReactInstanceManagerImpl.java:730)
at com.facebook.react.ReactInstanceManagerImpl.access$600(ReactInstanceManagerImpl.java:91)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:184)
at com.facebook.react.ReactInstanceManagerImpl$ReactContextInitAsyncTask.doInBackground(ReactInstanceManagerImpl.java:169)
at android.os.AsyncTask$2.call(AsyncTask.java:316)
at java.util.concurrent.FutureTask.run(FutureTask.java:237)
at android.os.AsyncTask$SerialExecutor$1.run(AsyncTask.java:255) 
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1133) 
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:607) 
at java.lang.Thread.run(Thread.java:776)

問題原因：還記得我們上面再項(xiàng)目build.gradle中的配置嗎？

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

這個(gè)是我們按照官方文檔寫的，但是因?yàn)?rootDir/本身已經(jīng)是跟目錄了，在"../"就會找不到。我們把"../"去掉

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

ok
這個(gè)時(shí)候，如果是紅屏等連不上服務(wù)器等，自己去查看解決方案。
如果手機(jī)能連上服務(wù)器，就會運(yùn)用成功了

拓展

多個(gè)activity引用不同的js文件

這是一個(gè)activity綁定的index.android.js文件的布局，如果我們想在多個(gè)activity綁定不同的js文件界面怎么做?
1：新建js文件：

'use strict';

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

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

AppRegistry.registerComponent('MyHelloWorld', () => MyHelloWorld);

然后在index.android.js中引入

import MyHelloWorld from './android_a';

在activity引用：

 mReactRootView.startReactApplication(mReactInstanceManager, "MyHelloWorld", null);

大功告成。
坑：必現(xiàn)在index.android.js中import，然后這個(gè)類才會被調(diào)用，

AppRegistry.registerComponent('MyHelloWorld', () => MyHelloWorld);

注冊才會執(zhí)行，否則會報(bào)錯(cuò)："MyHelloWorld"找不到

同一個(gè)界面包含原生文件和RN文件

直接把ReactRootView當(dāng)Android普通view使用。在綁定的xml中寫

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context="com.example.wuxiaoyong.androidinstallrn.MainActivity">

    <TextView
        android:background="#ff0000"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:text="Hello World!" />
    <com.facebook.react.ReactRootView
        android:id="@+id/rn_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

在activity中找到這個(gè)組件并綁定界面

mReactRootView = (ReactRootView) findViewById(R.id.rn_view)
mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorld", null);

ok 大功告成。
下一篇：Android和RN的交互

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容