react-native 与 java 混合开发 1/3 框架搭

有哪些场景是需要混合开发呢？

1. react-native 原生android的UI的支持
2. react-native 的一些交互逻辑需要java处理(比如APP跳转微信小程序)

根据 单一职责的原则 ，文章分为三篇，此篇为react-native 与 java 混合开发 1/3 框架搭建

关键
关键是js与java的通信

搭建步骤

一. 新建一个react-native项目和android项目。

1. 新建一个react-native 项目
2. 在新建的react-native 项目的根目录建立新的文件夹android
3. 在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" />