在實現本機Toast模塊后使用React Native中的本機模塊時未處理的承諾拒絕

Question

我試圖通過在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!')
...

誰能告訴我怎么了？ 我遵循了網站上的官方教程，但是，此警告消息出現了。

Answer 1

添加Android橋接代碼后，請確保該應用已重建。 同樣，您的“ show”方法接口還有一個額外的（未使用的）持續時間參數，當從React-Native調用該方法時未提及。