Android react native和原生交互

在采用React-Native开发APP时，必然要用到原生的API,rn和原生交互无非就两种情况：

1. Android主动向JS端传递事件、数据
2. JS端被动向Android询问获取事件、数据

React Native 与原生交互一般有三种方式，分别是Callback,Promise,RCTDeviceEventEmitter。

交互步骤:
1.创建一个原生模块来继承ReactContextBaseJavaModule并实现getName()函数

public class TestModules extends ReactContextBaseJavaModule {
    private ReactApplicationContext context;
    public TestModules(ReactApplicationContext reactContext) {
        super(reactContext);
        context=reactContext;
    }
    @Override
    public String getName() {
        return "test";
    }
}

2.将它注册到ReactNative中

public class ReactPackageRegister implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules=new ArrayList<>();
        modules.add(new TestModules(reactContext));//注册模块
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

3.将模块注册到Application中去

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new ReactPackageRegister()//注册package
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

4.React native 调用原生方法

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableOpacity,
    NativeModules,
} from 'react-native';

const Natives=NativeModules.test;

export default class Home extends Component {

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} activeOpacity={0.5} onPress={()=>{
                    this.props.navigation.navigate('Detail');
                }} >
                    <Text style={{color: 'white'}}>首页</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.button,{marginTop:10}]} activeOpacity={0.5} onPress={()=>this.toast()} >
                    <Text style={{color: 'white'}}>toast测试</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.button,{marginTop:10}]} activeOpacity={0.5} onPress={
                    ()=>this.sums()} >
                    <Text style={{color: 'white'}}>回调js</Text>
                </TouchableOpacity>

                <TouchableOpacity style={[styles.button,{marginTop:10}]} activeOpacity={0.5} onPress={
                    ()=>this.cell()
                    } >
                    <Text style={{color: 'white'}}>拨打电话</Text>
                </TouchableOpacity>
            </View>
        );
    }

    toast() {
        Natives.showToast('调用成功');
    }
    sums(){
        Natives.haveCallBack(10,10,(sum)=>{
            // Natives.showToast(sum);
           {Natives.showToast(sum);} 
        });
    }
    cell(){
        //tel,访问native中的getConstants()函数返回的常量值
        Natives.callPhone(Natives.tel);//拨打电话
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    button: {
        width: 120,
        height: 45,
        borderRadius: 5,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#4398ff',
    }
});