文章出自：https://blog.csdn.net/a526001650a/article/details/75127141
一、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())
网友评论