React-Native与原生通信之Toast模块

写作时间：2020/4/7
React-Native版本：0.62.2
Android Studio版本：3.5.2
开发平台：Windows
目标平台：Android

在RN的开发过程中，有时会不可避免地使用原生模块。本文通过RN调用Android原生的Toast模块来实现从RN到原生的通信。

1 通过react-native init 命令创建一个初始项目（我创建的项目名称为Init），打开项目中的App.js文件，将代码全部删除，换成如下内容

// App.js
import React from 'react';
import {View, NativeModules} from 'react-native';

const NativeModule = NativeModules.MyNativeModule;

export default class App extends React.Component {
    componentDidMount() {
        NativeModule.showToast('你大爷', NativeModule.SHORT);
    }
    render() {
        return <View style={{flex: 1, backgroundColor: 'cyan'}} />;
    }
}

2 通过Android Studio打开RN工程下的Android项目，在app/java/com/init目录下找到MainApplication.java文件，对文件进行如下修改

修改1

// MainApplication.java

···

// 新添加MyReactPackage包（这个包会在后面创建）
import com.init.MyReactPackage;

···

修改2

// MainApplication.java

···
@Override
protected List<ReactPackage> getPackages() {
    @SuppressWarnings("UnnecessaryLocalVariable")
    List<ReactPackage> packages = new PackageList(this).getPackages();
    
    //找到getPackages方法，添加如下语句
    packages.add(new MyReactPackage());
    
    return packages;
}
···

3 在同路径下新建文件，命名为MyNativeModule.java，代码如下

// MyNativeModule.java

package com.init;

import android.widget.Toast;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

import java.util.Map;
import java.util.HashMap;

public class MyNativeModule extends ReactContextBaseJavaModule {
    private static ReactApplicationContext context;

    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";

    public MyNativeModule(ReactApplicationContext reactContext) {
        super(reactContext);
        context = reactContext;
    }

    @Override
    public String getName() {
        return "MyNativeModule";
    }

    @Override
    public Map<String, Object> getConstants() {
        final Map<String, Object> constants = new HashMap<>();
        constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);
        constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);
        return constants;
    }

    @ReactMethod
    public void showToast(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}

4 在相同目录下再创建另一个文件MyReactPackage.java，代码如下

// MyReactPackage.java

package com.init;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyReactPackage implements ReactPackage {

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

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new MyNativeModule(reactContext));
        return modules;
    }
}

5 重新执行react-native run-android，结果如下