Ejected Expo應用程序無法在NativeModules中找到自定義本機模塊

Question

我有一個React Native應用程序，它是使用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 Native應用程序中，我像這樣加載它：

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

import { NativeModules } from 'react-native'

export const { ToastExample } = NativeModules

預期結果

我希望native-modules.ts ToastExample返回一些我可以與之交互的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代碼（不僅僅是從bundle中重新加載包），我希望這可以工作。

您沒有在ToastExample上顯示實際的方法請求，那么您在哪一點確定ToastExample未定義？ 你有沒有使用調試器？

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

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

如果你在showTest函數中設置一個斷點，調試器在評估調試控制台內的'ToastExample'時可能會返回一個ReferenceError，而代碼運行正常。 那么代碼實際上是在運行時中斷了嗎？