React Native：Android集成React Native的一些配置

一、Android集成RN的一些基本配置
1.打开项目根目录的build.gradle文件，加上如下信息：
allprojects {
repositories {
...
maven {
url "$rootDir/node_modules/react-native/android"
}
}
}

2.打开项目根目录中app目录的build.gradle文件，加上如下信息：
android {
...
//解决报错
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:3.0.0'
}
}
dependencies {
compile 'com.android.support:appcompat-v7:25.3.1' //可随意换成别的版本
compile 'com.facebook.react:react-native:+'
}

3.打开项目根目录中的gradle.properties文件，加入如下代码：
android.useDeprecatedNdk=true

4.在项目根目录中加入package.json文件和node_modules目录文件包：
(1)用命令方式创建：
点Android Studio -> Terminal选项卡，在命令行输入以下命令：

npm init //生成package.json文件

npm install --save react react-native //下载node_modules目录文件包

(2)直接手工创建package.json，并添加以下内容，然后从别处复制node_modules目录文件包到项目根目录：
{
"name": "RnModule",
"version": "1.0.0",
"description": "this is a react native module",
"main": "index.android.js",
"scripts": {
"build": "(cd android/ && ./gradlew assembleDebug)",
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"keywords": [
"react",
"native"
],
"author": "yyh",
"license": "ISC",
"devDependencies": {
"react": "^15.4.1",
"react-native": "^0.39.2"
},
"dependencies": {
"react": "^15.4.1",
"react-native": "^0.39.2",
"babel-jest": "17.0.2",
"babel-preset-react-native": "1.9.0"
}
}

5.在项目根目录下创建index.android.js文件，输入以下内容：

import {AppRegistry} from 'react-native';
import RnModule from './js/Home'           //此处是加载首个js组件文件,Home为js名称，随意命名，RnModule名称随意，要跟下面统一
AppRegistry.registerComponent('RnModule', () => RnModule);  //此处RnModule要上面的以入Activity中一样

Home.js内容如下：

import React, {Component} from 'react';
import OtherComponet from './component/OtherComponent'  //导入其他js组件

export default class Home extends Component {
    render(){
        return (
            <OtherComponet />  //使用OtherComponet
        );
    }
}

OtherComponent.js内容如下：

import React, {Component, PropTypes} from 'react';
import {Other} from 'react-native';

export default class NavigatorComponent extends React.Component {

    ...

    render() {
        return (
            <Other
                ...
            />
        );
    }
}

6.新建Activity，继承ReactActivity，重写getMainComponentName方法，返回组件名称，跟index.android.js中注册的名称一致，代码如下;

public class RNActivity extends ReactActivity {
    
    @Override
    protected String getMainComponentName() {
        return Constant.RN_MAIN_NAME;  //返回模块名称，跟index.android.js中注册的名称一致
    }
}

7.在AndroidManifest.xml中配置：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.SYSTEM_OVERLAY_WINDOW" />
<activity android:name="com.yyh.rn.MyReactActivity" />  //自已的Activity
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

8.打包JS：
点Android Studio -> Terminal选项卡，在命令行输入以下命令：
react-native bundle --entry-file index.android.js --bundle-output ./app/src/main/assets/index.android.bundle --platform android --assets-dest ./app/src/main/res/ --dev false

9.启动本机服务：
点Android Studio -> Terminal选项卡，在命令行输入以下命令：
npm start

10.将app运行到模拟器或真机上

二、一些遇到的错误：
错误一：
不打包js时，用Android Studio -> run时会在控制台报以下错误：
Exception in native call from js
Java.lang.RuntimeException: ReferenceError: Can’t find variable: __fbBatchedBridge

解决办法：
打包JS：
点Android Studio -> Terminal选项卡，在命令行输入以下命令：
react-native bundle --entry-file index.android.js --bundle-output ./app/src/main/assets/index.android.bundle --platform android --assets-dest ./app/src/main/res/ --dev false

错误二：
app运行时控制台报如下错误：
java.lang.UnsatisfiedLinkError: could find DSO to load: libreactnativejni.so

解决办法：
工程根目录的gradle.properties文件加入如下代码：
android.useDeprecatedNdk=true
在app的build.gradle文件中加入NDK配置
android {
defaultConfig {
...
ndk {
abiFilters "armeabi-v7a", "x86"
}
}
packagingOptions {
exclude "lib/arm64-v8a/librealm-jni.so"
}
}

错误三：
用Android Studio -> run时会在控制台报以下错误：
com.google.code.findbugs:jsr305:+

解决办法：
在app的build.gradle文件中加入
android {
...
configurations.all {
resolutionStrategy.force 'com.google.code.findbugs:jsr305:+'
}
}

错误四：
Got JS Exception: TypeError: undefined is not a function (evaluating '(bridgeConfig.remoteModuleConfig||[]).forEach')

解决办法：
工程根目录的build.gradle中修改为
allprojects {
repositories {
jcenter()
maven {
url "$rootDir/node_modules/react-native/android" //官方例子多了../，有错误
}
}
}

错误五：
运行APP，出现红色界面，标题显示：
Can't find variable: __fbBatchedBridge

解决办法：
用模拟器不会出现这情况，真机时需要配置服务器ip和端口

错误六：
运行APP，出现红色界面，标题显示：
undefined is not an object(evaluating 'tr.ReactCurrentOwner')

解决办法：
点Android Studio -> Terminal选项卡，在命令行输入以下命令：
npm start
在app中点第2个"RELOAD",会自动加载并下载JS文件。

错误七：

运行APP，出现红色界面，标题显示：
undefined is not an object(evaluating '_reactnative.NativeModules.本地模块名.本地方法名)

解决办法：
将自定义ReactPackage在Activity中注册，去掉Application中ReactApplication的getReactNativeHost方法的实现
mReactInstanceManager = ReactInstanceManager.builder()
.addPackage(new MainReactPackage())
.addPackage(new RNPackage())

React Native：Android集成React Native的一些配置

猜你喜欢