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桥接代码后重新构建了应用程序。另外，您的“显示”方法界面还有一个额外的（未使用的）持续时间参数，当从React-Native调用该方法时，不会提及该参数。

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

1 个答案: