android - react-native：如何从 android native 模块中显示的 JS 视图访问 react-native 库

Question

我创建了一个 react-native 应用程序，按下按钮将加载一个 Android Native Module。调用时，本机模块将启动一个 Android 活动，该活动利用 Presentation 类（以及https://github.com/commonsguy/cwac-presentation）来控制第二个监视器显示（chromecast、miracast 等）。我让这一切都很好。

下一阶段是使用本机模块在第二个监视器上显示 react-native 视图，我能够使用 ReactRootView 和 ReactInstanceManager 来实现这一点（https://facebook.github.io/react-native/docs/integration -with-existing-apps）。Android 原生模块从根 react-native 应用程序加载 react-native 视图。

mReactRootView = new ReactRootView(activity);
mReactInstanceManager = ReactInstanceManager.builder().setApplication(activity.getApplication())
                .setCurrentActivity(activity).setBundleAssetName("index.android.bundle").setJSMainModulePath("index")
                .addPackage(new MainReactPackage()).setUseDeveloperSupport(true)
                .setInitialLifecycleState(LifecycleState.RESUMED).build();

group.addView(mReactRootView);
mReactRootView.startReactApplication(mReactInstanceManager, "JsPresentationView", getLaunchOptions());

（其中“JsPresentationView”是要显示的 react-native 视图的名称）

当 react-native 视图显示在 Presentation 屏幕上时，有一个 Android 视图显示在移动屏幕上。这使用 RCTDeviceEventEmitter 将事件发送到 react-native 计时器。EG 播放/暂停计时器视图：

ReactInstanceManager displayInstanceManager = reactFragmentPresentation.getInstanceManager();

ReactContext displayContext = displayInstanceManager.getCurrentReactContext();

displayContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("TogglePlayback",
                    displayParams);

（其中 'TogglePlayback' 是要触发到 react-native 视图的事件的名称）

我发现的问题是尝试从 ReactRootView 加载的 react-native 视图访问导入到根 react-native 应用程序的 react-native 库。我可以访问主要的 react-native 库以获取主要的 react-native 功能，但任何其他导入始终返回为 null。例如，我正在尝试使用“react-native-audio-toolkit”通过第二个屏幕显示上的 react-native 视图播放音乐。

import { Player } from "react-native-audio-toolkit";

抛出此错误： react-native 错误屏幕。 由于 react-native 视图可以访问主 react-native 库，我开始认为这些问题是由我的 native-module 中的 build.gradle 引起的：

buildscript {
    repositories {
        jcenter()
        google()
        maven {
            url "http://repo.commonsware.com"
        }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.2.1'
    }
}

apply plugin: 'com.android.library'

android {
    compileSdkVersion 28

    buildToolsVersion "28.0.3"

    defaultConfig {
        minSdkVersion 23
        targetSdkVersion 28
        versionCode 1
        versionName "1.0"
    }
    lintOptions {
        abortOnError false
    }
    compileOptions {
        targetCompatibility JavaVersion.VERSION_1_8
        sourceCompatibility JavaVersion.VERSION_1_8
    }
}


repositories {
    mavenCentral()
    google()
    jcenter()
    maven {
        url "http://repo.commonsware.com"
    }
    maven {
        url "$rootDir/../example/node_modules/react-native/android"
    }
    maven {
        url "$rootDir/../example/node_modules/react-native-audio-toolkit/android"
    }
    maven {
        url 'https://maven.google.com/'
        name 'Google'
    }
}

dependencies {
    implementation 'com.facebook.react:react-native:+'
    implementation 'com.commonsware.cwac:layouts:0.4.4'
    implementation 'com.commonsware.cwac:presentation:0.5.3'
    implementation 'com.google.android.exoplayer:exoplayer-core:2.9.0'
    implementation fileTree(dir: "libs", include: ["*.jar"])
}

allprojects {
    repositories {
        maven {
            url "$rootDir/../example/node_modules/react-native/android"
        }
        maven {
            url "$rootDir/../example/node_modules/react-native-audio-toolkit/android"
        }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
}
subprojects {
    afterEvaluate {project ->
        if (project.hasProperty("android")) {
            android {
                compileSdkVersion 28
                buildToolsVersion "28.0.3"
            }
        }
    }
}

（上面的示例目录是 react-native 应用程序的位置，它将从 $rootDir 导入本机模块）

我尝试了对 build.gradle 的许多不同更新，以包含 react-native-audio-toolkit 库，但我不确定这是否是问题的真正根源。有谁知道我是否遗漏了上面的 build.gradle 中的任何内容以将 react-native 库转发到呈现的 react-native 视图？或者，如果我想要实现的目标甚至是可能的？

我相信我可以通过将 react-native 演示视图分离到它自己的 react-native 项目中来解决这个问题——但如果可能的话，我希望将其保留在同一个项目中。

标签： androidreact-nativereact-native-androidreact-native-native-module