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文件中，它将起作用。

React Native Module（Android）-TypeError：未定义不是对象

1 个答案: