首先这篇过程和上一篇混合开发之Android原生加载ReactNative页面的大部分步骤都是一样的
首先还是大概的讲一下流程:
1、Androidstudio新建Android项目,命令行执行npm init,把项目初始化成RN项目
2、执行npm install –save react react-native 安装react和react-native,这里要注意一下react-native的版本问题,在使用0.56.0版本的时候,项目编译会出问题,建议使用其他版本,比如0.55.4
3、Android目录下的build.gradle引入
dependencies {
compile "com.facebook.react:react-native:+"
...
}
Project目录下的build.gradle引入
allprojects {
repositories {
google()
jcenter()
maven {
//这里要注意路径 不要写错!!!切记
url "$rootDir/node_modules/react-native/android"
}
}
}
添加完之后,项目先编译一遍
4、在Project目录下新建index.android.js以及App.js文件,编写ReactNative代码
5、在Project目录下的scr/main中新建assets文件夹,并且在命令行中输入(每次RN文件有变动都需要重新执行)一下命令
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res
6、然后在MainActivity中编码(具体看后面的代码)
下面看具体步骤:
1、初始化 npm init
并且在生成的package.json文件中添加下面一行
"start": "node node_modules/react-native/local-cli/cli.js start"
修改完的package.json
{
"name": "hydemo2",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^16.4.2",
"react-native": "^0.55.4"
}
}
2、安装react和指定版本的react-native
这里安装react-native0.55.4版本是因为最新的0.56.0版本会出问题,最后还是需要降级
npm install --save react-native@0.55.4
npm install --save react
3、Android目录下的build.gradle引入
dependencies {
compile "com.facebook.react:react-native:+"
...
}
Project目录下的build.gradle引入
allprojects {
repositories {
google()
jcenter()
maven {
//这里要注意路径 不要写错!!!切记
url "$rootDir/node_modules/react-native/android"
}
}
}
4、在Project目录下新建index.android.js文件,编写ReactNative代码
/** @format */
import {AppRegistry} from 'react-native';
import App from './App';
AppRegistry.registerComponent("hydemo090304", () => App);
编辑App.js代码
/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, ToastAndroid, DeviceEventEmitter, Button} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
android:
'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
info: "嘟嘟嘟嘟"
}
}
componentWillMount() {
//注册接收器
this.testDataListener = DeviceEventEmitter.addListener('testData', e => {//for Android
ToastAndroid.show(e.data, 2000);
//更新状态及其他操作
。。。。
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>{this.state.info}</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</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,
},
});
5、在Project目录下的scr/main中新建assets文件夹,并且在命令行中输入
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output app/src/main/assets/index.android.bundle --assets-dest app/src/main/res
6、编辑Android代码
package com.android.sjq.hydemo090304;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.Button;
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.devsupport.DoubleTapReloadRecognizer;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.shell.MainReactPackage;
public class MainActivity extends AppCompatActivity {
private Button mButton;
private ReactRootView mReactRootView;
private ReactInstanceManager mReactInstanceManager;
private ReactContext reactContext;
private DoubleTapReloadRecognizer mDoubleTapReloadRecognizer;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mDoubleTapReloadRecognizer = new DoubleTapReloadRecognizer();
mButton = (Button) findViewById(R.id.button);
mButton.setOnClickListener(mOnClickListener);
mReactRootView = (ReactRootView) findViewById(R.id.react_view);
mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
// 这个"App1"名字一定要和我们在index.js中注册的名字保持一致AppRegistry.registerComponent()
mReactRootView.startReactApplication(mReactInstanceManager, "hydemo090304", null);
}
View.OnClickListener mOnClickListener = new View.OnClickListener() {
@Override
public void onClick(View v) {
WritableMap params = Arguments.createMap();
params.putString("data", "AAAA");
sendEvent(getReactContext(), "testData", params);
}
};
private void sendEvent(ReactContext reactContext, String eventName, @Nullable WritableMap params) {
if (reactContext == null) {
return;
}
reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);
}
private ReactContext getReactContext() {
return reactContext != null ? reactContext : mReactInstanceManager != null ? mReactInstanceManager.getCurrentReactContext() : null;
}
}
xml代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sendMsgToRN"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<com.facebook.react.ReactRootView
android:id="@+id/react_view"
android:layout_width="match_parent"
android:layout_height="300dp"
android:layout_below="@+id/button">
</com.facebook.react.ReactRootView>
</RelativeLayout>
完事 运行 看效果
还有一个Android和RN混合开发的demo,需要的可以下载参考,demo包含了
1、Android加载RN页面
2、Android调用RN函数
3、RN调用Android函数
传送门