1.在原有 Android 项目中嵌入 ReactNative 模块
ReactNative的发展已经进入了很多开发者视野，作为一名原生开发者更是对 RN 充满了无限的好奇和期待
相信对于小白的我们，第一步就是如何优雅的集成rn项目,废话不多说直接进入主题(我这边是利用了as3.0创建)
1、项目的准备
1、首先创建一个android项目
2、搭建一些必要的环境 node.js rn环境(相信这个网上一搜一大把，只要按步骤搭建即可)
3、项目的改造后的流程图(这里盗用下网上的图)
image.png
2、项目的依赖添加
- 在原生 Android 项目的在app/build.gradle文件中，添加React Native依赖(位置可参照下方的图片)
ndk {
abiFilters "armeabi-v7a", "x86"
}
packagingOptions {
exclude "lib/arm64-v8a/librealm-jni.so"
}
implementation 'com.facebook.react:react-native:+'
image.png
- 在工程目录下找到工程的 build.gradle文件中，添加 maven依赖
allprojects {
repositories {
google()
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/node_modules/react-native/android"
}
}
}
- 在AndroidManifast 文件里面添加权限
<uses-permission android:name="android.permission.INTERNET"/>
3、创建项目入口
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
public void onClick(View view) {
startActivity(new Intent(this,Reactactivity.class));
}
}
4、创建rn的入口
public class Reactactivity 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")
.setJSMainModulePath("index.android")
.addPackage(new MainReactPackage())
/**
* http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app
* 调试模式下,建议直接写成 true 吧,我就因为这个错误,调了两天原因
*/
// .setUseDeveloperSupport(BuildConfig.DEBUG)
.setUseDeveloperSupport(true)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "hello", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
@Override
protected void onPause() {
super.onPause();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostPause();
}
}
@Override
protected void onResume() {
super.onResume();
if (mReactInstanceManager != null) {
mReactInstanceManager.onHostResume(this, this);
}
}
@Override
public void onBackPressed() {
if (mReactInstanceManager != null) {
mReactInstanceManager.onBackPressed();
} else {
super.onBackPressed();
}
}
}
5、在AndroidManifast 文件里面添加创建RN的Activity
<activity android:name=".Reactactivity"/>
6、下面配置工程项目的 RN开发环境
1、先后顺序依次执行一下命令
$ npm init
这里需要你自己配置下package.json 里面的一些东西，照着提示配置可以参照下面的图片配置即可
之后你的工程下面就会出现package.json 这个文件，然后打开添加，位置可参照下方图片
"start": "node node_modules/react-native/local-cli/cli.js start"
image.png
image.png
接着依次输入下面的命令
$ npm install --save react
$ npm install --save react-native
$ curl -o .flowconfig https://raw.githubusercontent.com/facebook/react-native/master/.flowconfig
7、工程目录下创建 index.android.js文件由于是测试，里面内容我是copy的
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
我是 原生项目嵌入的 ReactNative
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
//注意：这个hello要和前面RN入口里面(startReactApplication方法里面的参数)的相对应
AppRegistry.registerComponent('hello', () => AwesomeProject);
8、现在你可以运行的你的android项目
运行之后使用：npm start 或者react-native start
====================================
以下是踩过的坑
unable to load script from assets 'index.android.bundle'
..............
..........
如果报这个错，说明你没有这个index.android.bundle文件
解决办法：
在你的app/main/src/目录下面创建assets这个见文夹之后运行
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output
app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
