有哪些场景是需要混合开发呢？
- react-native 原生android的UI的支持
- react-native 的一些交互逻辑需要java处理(比如APP跳转微信小程序)
根据 单一职责的原则 ，文章分为三篇，此篇为react-native 与 java 混合开发 1/3 框架搭建
关键
关键是js与java的通信
搭建步骤
一. 新建一个react-native项目和android项目。
- 新建一个react-native 项目
- 在新建的react-native 项目的根目录建立新的文件夹android
- 在android目录下用android studio 建立新的android项目
二. 将新建的两个项目联系起来
1.在Android Studio中左面菜单栏中选择Android(默认也是这个)，
2.在build.gradle(Project: xxx)中的修改allprojects如下:
allprojects {
repositories {
google()
jcenter()
maven {
// All of React Native (JS, Android binaries) is installed from npm
url "$rootDir/../node_modules/react-native/android"
}
}
}
3.在build.gradle(Module: app)中的dependencies添加
implementation "com.facebook.react:react-native:+"
三.使用原生调用我们的JS组件
1.在react-native 的根目录下新建index.js文件，做为的react-native界面的入口文件. 下面代码中的HelloWorld组件是一个事例，大家自行更换。
import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class HelloWorld extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.hello}>Hello, World</Text>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
hello: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
AppRegistry.registerComponent('MyReactNativeApp', () => HelloWorld);
上面代码的 MyReactNativeApp 是react-native告诉原生android的名称
2.在原生中新建一个Activity渲染react-native组件.
import com.facebook.react.ReactInstanceManager;
import com.facebook.react.ReactRootView;
import com.facebook.react.common.LifecycleState;
import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
import com.facebook.react.shell.MainReactPackage;
public class MyReactActivity 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")
.setJSMainModulePath("index")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build();
mReactRootView.startReactApplication(mReactInstanceManager, "MyReactNativeApp", null);
setContentView(mReactRootView);
}
@Override
public void invokeDefaultOnBackPressed() {
super.onBackPressed();
}
}
3.在AndroidManifest.xml中添加activity的声明
<activity
android:name=".MyReactActivity"
android:label="@string/app_name"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
</activity>
四.配置权限
1.在manifests文件夹下的AndroidManifest.xml下添加权限
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
