我已经创建了一个本机应用程序,按一下该按钮即可加载Android本机模块。调用时,本机模块将启动一个Android活动,该活动使用Presentation类(以及https://github.com/commonsguy/cwac-presentation)来控制第二台显示器的显示(chromecast,miracast等)。我一切都很好。
下一步是使用本机模块在第二个监视器上显示一个本机视图,我能够使用ReactRootView和ReactInstanceManager(https://facebook.github.io/react-native/docs/integration-with-existing-apps)来实现这一点。 Android本机模块从根本机应用程序加载本机视图。
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”是要显示的本机视图的名称)
在“演示”屏幕上显示本机视图时,在移动屏幕上显示Android视图。这使用RCTDeviceEventEmitter将事件发送到react-native计时器。例如。播放/暂停计时器视图:
ReactInstanceManager displayInstanceManager = reactFragmentPresentation.getInstanceManager();
ReactContext displayContext = displayInstanceManager.getCurrentReactContext();
displayContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("TogglePlayback",
displayParams);
(“ TogglePlayback”是要触发到本机视图的事件的名称)
我发现的问题是试图从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 error screen. 由于react-native视图可以访问主要的react-native库,因此我开始认为这些问题是由我的本机模块中的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项目中来解决这个问题-但如果可能的话,我希望将其保留在同一项目中。