ReactNative 调用Android 原生（一）——原生模块(一)

前言

React native调用Android原生主要2种方式：
1、调用原生模块
2、调用原生组件
这里之所以强调有2种方式主要是自己刚开始弄rn调原生的时候感觉很懵，感觉没有学习的方向，所以提醒一下大家咱们的学习目标。
官网也有给说明：​​​https://reactnative.cn/docs/native-modules-android/​​

简介

一共5步：
1、新建rn项目，并用AndroidStudio打开新项目下的Android目录
2、创建一class继承​​​ReactContextBaseJavaModule​​​ （这里alt+enter重写构造器+getName()方法，getName()方法返回的string值将在js中被调用）
3、创建一class 实现ReactPackage接口，（这里将重写createNativeModules()方法【用于添加Module】+createViewManagers()方法）
ps：createNativeModules用于调用原生模块时，createViewManagers用于调用原生组件时，看名字就能区别出来。
4、MainApplication.java中添加第3步中的package。
5、在rn中调用

简单使用（一）

主要为了熟悉下上面几个步骤

1、新建rn项目，并用AndroidStudio打开新项目下的Android目录。(这个就不多说了)
2、创建一class继承​​​ReactContextBaseJavaModule​​​ （这里alt+enter重写构造器+getName()方法，getName()方法返回的string值将在js中被调用）
温馨提示： getName()方法注释

public class TestModules extends ReactContextBaseJavaModule {
    private ReactApplicationContext mContext;

    public TestModules(ReactApplicationContext reactContext) {
        super(reactContext);
        mContext = reactContext;
    }

    @Override
    public String getName() {
        //注意 这里的名字才是RN中被调用的名字
        return "TestModules";
    }

    /**
     * 调用Android原生模块，可传递的参数类型如下
     * Boolean -> Bool
     *Integer -> Number
     * Double -> Number
     * Float -> Number
     * String -> String
     * Callback -> function
     * ReadableMap -> Object
     * ReadableArray -> Array
     * 想了解ReadableMap使用 
     * @param msg
     */
    @ReactMethod
    public void Toasts(ReadableMap msg) {
        ReadableNativeMap map= (ReadableNativeMap) msg;
        HashMap map2=map.toHashMap();
        Toast.makeText(mContext, (String) map2.get("name"), Toast.LENGTH_SHORT).show();
    }
 }

3、创建一class 实现ReactPackage接口，（这里将重写createNativeModules()方法【用于添加Module】+createViewManagers()方法）

public class TestPackages implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> nativeModules = new ArrayList<>();
        nativeModules.add(new TestModules(reactContext));
        return nativeModules;
    }

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

4、MainApplication.java中添加第3步中的package。

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 SQLitePluginPackage(),  // register SQLite Plugin here
                    new TestPackages()
            );
        }

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

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

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

5、在rn中调用
导入NativeModules
就直接在App.js里面改的

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, NativeModules, DeviceEventEmitter} from 'react-native';
import NativeTimerView from "./src/component/NativeTimerView";
type Props = {};
export default class App extends Component<Props> {
  constructor() {
    super();
  }
  toast = () => {
    let obj = {
      id: 1,
      name: "xiaohong"
    };
    //这里的TestModules对应 getName()返回的
    NativeModules.TestModules.Toasts(obj);
  };
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}
              onPress={this.toast}
        >Welcome to React Native!</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,
  },
});