1.在原有 Android 項(xiàng)目中嵌入 ReactNative 模塊
ReactNative的發(fā)展已經(jīng)進(jìn)入了很多開發(fā)者視野，作為一名原生開發(fā)者更是對(duì) RN 充滿了無(wú)限的好奇和期待
相信對(duì)于小白的我們，第一步就是如何優(yōu)雅的集成rn項(xiàng)目,廢話不多說(shuō)直接進(jìn)入主題(我這邊是利用了as3.0創(chuàng)建)
1、項(xiàng)目的準(zhǔn)備
1、首先創(chuàng)建一個(gè)android項(xiàng)目
2、搭建一些必要的環(huán)境 node.js rn環(huán)境(相信這個(gè)網(wǎng)上一搜一大把，只要按步驟搭建即可)
3、項(xiàng)目的改造后的流程圖(這里盜用下網(wǎng)上的圖)
image.png
2、項(xiàng)目的依賴添加
- 在原生 Android 項(xiàng)目的在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 文件里面添加權(quán)限
<uses-permission android:name="android.permission.INTERNET"/>
3、創(chuàng)建項(xiàng)目入口
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、創(chuàng)建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")
// 相信很多人都是這個(gè)方法，但是我的沒有可能是我的版本更新了方法名替換了，有哪一個(gè)方法就用哪一個(gè)
// .setJSMainModuleName("index.android")
.setJSMainModulePath("index.android")
.addPackage(new MainReactPackage())
/**
* http://stackoverflow.com/questions/37951246/react-native-cannot-find-development-server-integrating-existing-android-app
* 調(diào)試模式下,建議直接寫成 true 吧,我就因?yàn)檫@個(gè)錯(cuò)誤,調(diào)了兩天原因
*/
// .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 文件里面添加創(chuàng)建RN的Activity
<activity android:name=".Reactactivity"/>
6、下面配置工程項(xiàng)目的 RN開發(fā)環(huán)境
1、先后順序依次執(zhí)行一下命令
$ npm init
這里需要你自己配置下package.json 里面的一些東西，照著提示配置可以參照下面的圖片配置即可
之后你的工程下面就會(huì)出現(xiàn)package.json 這個(gè)文件，然后打開添加，位置可參照下方圖片
"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、工程目錄下創(chuàng)建 index.android.js文件由于是測(cè)試，里面內(nèi)容我是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}>
我是 原生項(xiàng)目嵌入的 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,
},
});
//注意：這個(gè)hello要和前面RN入口里面(startReactApplication方法里面的參數(shù))的相對(duì)應(yīng)
AppRegistry.registerComponent('hello', () => AwesomeProject);
8、現(xiàn)在你可以運(yùn)行的你的android項(xiàng)目
運(yùn)行之后使用：npm start 或者react-native start
====================================
以下是踩過(guò)的坑
unable to load script from assets 'index.android.bundle'
..............
..........
如果報(bào)這個(gè)錯(cuò)，說(shuō)明你沒有這個(gè)index.android.bundle文件
解決辦法：
在你的app/main/src/目錄下面創(chuàng)建assets這個(gè)見文夾之后運(yùn)行
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
