将 Native Bridge 模块导入 React Native 中的 JavaScript

Question

我想将我的本地编写的模块（java，Android）导入到JS中的React Native源代码中。

我已将依赖项加载到：android/app/libs/dependencies.jar我已经将我的模块创建成android/app/src/main/java/com/rctcognito/：

除了一些源文件，我还有模块和包。

该模块正在实现以下类： public class Cognito extends ReactContextBaseJavaModule

下面是包类：

package com.rctcognito;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
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 RCTCognitoPackage implements ReactPackage {
    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
            return Collections.emptyList();
    }
    @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 Cognito(reactContext));
            return modules;
    }
}

然后，我通过添加新包来更新MainApplication.java： import com.rctcognito.RCTCognitoPackage;并将其添加到列表中： new RCTCognitoPackage(),

考虑到 React-Native 的官方文档，我应该能够像这样加载它：

import { NativeModules } from 'react-native';
module.exports = NativeModules.Cognito;
import Cognito from './Cognito';

但是我的应用程序无法加载./Cognito。你知道我可能做错了什么吗？多谢！

Answer 1

这不是它的工作原理。

所有原生模块都通过 React Native 提供的NativeModules子模块公开。

这是正确的用法。

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

继续执行简单的console.log(NativeModules)以查看本机代码库公开的内容。

Answer 2

有两种方法可以做到这一点：

创建文件认知.js

import {NativeModules} from 'react-native';
module.exports = NativeModules.Cognite;

然后通过以下方式将其导入到您需要的位置：

import Cognite from './Cognite';

另一种方法是直接导入：

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

您可以查看适用于iOS和Android的React Native Bridge-> https://medium.com/@abhisheknalwaya/react-native-bridge-for-ios-and-android-43feb9712fcb