React Native Module (Android) - TypeError: undefined 不是对象

Question

我正在尝试在React Native（Android模块）上工作，但我遇到了这种类型的错误" TypeError: undefined is not an object (evaluating '_ToastExample.default.show') "。我实际上遵循了这个链接 https://facebook.github.io/react-native/docs/native-modules-android 中的 React Native 文档。

请参阅以下代码：

// ToastModule.java
package com.reactnativeapp1;
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 {
    private static final String DURATION_SHORT_KEY = "SHORT";
    private static final String DURATION_LONG_KEY = "LONG";
    public ToastModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }
    @Override
    public String getName() {
        return "ToastExample";
    }
    @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 show(String message, int duration) {
        Toast.makeText(getReactApplicationContext(), message, duration).show();
    }
}
// ToastPackage.java
package com.reactnativeapp1;
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 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;
    }
}
// MainActivity.java
package com.reactnativeapp1;
import com.facebook.react.ReactActivity;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.react.ReactPackage;
import com.reactnativeapp1.ToastPackage;
import java.util.Arrays;
import java.util.List;
public class MainActivity extends ReactActivity {
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "ReactNativeApp1";
    }
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new ToastPackage()
        ); // Add this line with your package name.
    }
}
// ToastExample.js
import { NativeModules } from 'react-native';
module.exports = NativeModules.ToastExample;

在我的index.js中，我试图调用函数public void show(String message, int duration)，但我得到了那些未定义的错误。

// index.js
import React from 'react';
...
...
...
import ToastExample from './ToastExample';
export default class SampleReactNative extends React.Component {
     componentDidMount() {
          ToastExample.show('Awesome', ToastExample.SHORT);
     }
     ...
     ...
     ...
}
AppRegistry.registerComponent(appName, () => SampleReactNative);

拜托，我需要你们的帮助。

Answer 1

更改您的 MainActivity.java 代码并使用默认代码并将其添加到MainApplication.java文件中，如下所示

import com.your-app-name.CustomToastPackage; // <-- Add this line with your package name.
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new CustomToastPackage()); // <-- Add this line with your package name.}

只需在MainApplication.java文件中添加这两行即可。