弹出的Expo应用程序在NativeModules中找不到自定义本机模块

Question

我有一个React原生应用程序，它是使用Expo构建的，然后弹出到ExpoKit中。

我遵循本教程尝试实现一个自定义的原生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本机应用程序中，我加载它，如下所示：

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

import { NativeModules } from 'react-native'

export const { ToastExample } = NativeModules

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