在实现本机 Toast 模块后使用 React Native 中的本机模块时未处理的承诺拒绝答案

【问题标题】：Unhandled promise rejection when using Native Modules from React Native after implementing native Toast module在实现本机 Toast 模块后使用 React Native 中的本机模块时未处理的承诺拒绝
【发布时间】：2019-11-20 15:12:55
【问题描述】：

我正在尝试通过在 React Native 中创建一个模块来实现 Toast，但是当我尝试在 JavaScript 部分中执行它时，我收到了这个 YellowBox：

Warning Possible Unhandled Promise Rejection (id: 0)
TypeError: null is not an object (evaluating '_modules.Toast.show')

模块的创建

package com.project-name.modules;

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 ToastModule extends ReactContextBaseJavaModule {
  public ToastModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

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

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

注册模块

package com.project-name;

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;

import com.project-name.modules.ToastModule;

public class ToastPackage 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 ToastModule(reactContext));
    return modules;
  }
}

然后，我将此添加到我的MainApplication.java

...
import com.facebook.react.shell.MainReactPackage;
import com.project-name.ToastPackage;
...
protected List getPackages() {
  return Arrays.asList(
    new MainReactPackage(),
    new ToastPackage()
  );
}

现在，在 JavaScript 部分，我在 utils/modules.js 中创建了一个文件：

import { NativeModules } from 'react-native'

const { Toast } = NativeModules

export { Toast }

然后，我在我的组件中调用它

import { Toast } from '../../utils/modules'
...
Toast.show('Foo!')
...

谁能告诉我怎么了？我按照网站上的官方教程，但是出现了这个警告信息。

【问题讨论】：

标签： java android react-native android-toast

【解决方案1】：

确保在添加 Android 桥接代码后重新构建应用。此外，您的“显示”方法接口有一个额外的（未使用的）持续时间参数，在从 React-Native 调用该方法时未提及。

【讨论】：