React Native Module (Android) - TypeError: undefined is not an object

Question

我正在尝试使用 React Native（Android 模块），但我遇到了这种类型的错误“TypeError: undefined is not an object (evaluating '_ToastExample.default.show')”。我实际上在这个 link 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 文件中添加这两行即可。

React Native Module (Android) - TypeError: undefined is not an object

React Native Module (Android) - TypeError: undefined is not an object

android

reactjs

react-native

native-module