退出的Expo应用程序无法在NativeModules中找到自定义的本机模块

Question

我有一个使用Expo构建的React Native应用，然后将其弹出到ExpoKit。

我followed this tutorial尝试实现自定义的本机Android模块，但由于弹出的ExpoKit应用程序的布局而作了一些更改。因此，android目录的布局如下：

// <workspace>/android/app/src/main/java/com/reactlibrary/ToastModule.java

package com.reactlibrary;

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();
    }

}

// <workspace>/android/app/src/main/java/com/reactlibrary/ToastPackage.java

package com.reactlibrary;

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 CustomToastPackage 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;
    }

}

// <workspace>/android/app/src/main/java/host/exp/exponent/MainApplication.java

package host.exp.exponent;

// other imports

import com.reactlibrary.CustomToastPackage

public class MainApplication extends ExpoApplication implements AppLoaderPackagesProviderInterface<ReactPackage> {

  // Needed for `react-native link`
  public List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        // Needed for `react-native link`
        new MainReactPackage(),

        new KCKeepAwakePackage(),
        new CustomToastPackage()
    );
  }

  // other methods...
}

最后，在我的React Native应用程序中，我像这样加载它：

// <workspace>/src/utils/native-modules.ts

import { NativeModules } from 'react-native'

export const { ToastExample } = NativeModules

预期结果

我希望ToastExample中的native-modules.ts返回一些我可以与之交互的API，在这种情况下，CustomToastPackage会公开这些方法。

实际结果

ToastExample未定义。

Answer 1

请在同一路径上进行模块声明。

// <workspace>/android/app/src/main/java/com/reactlibrary/index.js
import { NativeModules } from "react-native";

const { ToastExample } = NativeModules;

export default ToastExample;

用法

import {
  NativeModules
} from "react-native";
...
const { ToastExample } = NativeModules;
...
ToastExample.show('Awesome', ToastExample.SHORT);

Answer 2

从您的代码来看，自定义包创建看起来是正确的。假设在运行该应用程序之前也已构建了android代码（而不仅仅是从捆绑程序中重新加载软件包），那么我希望它可以正常工作。

您没有在ToastExample上显示实际的方法请求，因此您确定在何时未定义ToastExample？您是否为此使用了调试器？

import { NativeModules } from 'react-native';
const { ToastExample } = NativeModules;

showTest = () => {
  ToastExample.show('test', ToastExample.SHORT);
}

如果要在showTest函数中设置一个断点，则调试器可能会在调试控制台内评估“ ToastExample”时返回ReferenceError，而代码运行良好。那么代码实际上在运行时就中断了吗？