1

ボタンを押すと Android ネイティブ モジュールが読み込まれる、react-native アプリケーションを作成しました。呼び出されると、ネイティブ モジュールは、Presentation クラスを ( https://github.com/commonsguy/cwac-presentationと共に) 使用して 2 番目のモニター ディスプレイ (chromecast、miracast など) を制御する Android アクティビティを開始します。私はこれをすべてうまく機能させました。

次の段階は、ネイティブ モジュールを使用して、反応ネイティブ ビューを 2 番目のモニターに表示することでした。これは、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 ビューがプレゼンテーション画面に表示される一方で、モバイル画面には Android ビューが表示されます。これは、RCTDeviceEventEmitter を使用して、反応ネイティブ タイマーにイベントを送信します。EG でタイマー ビューを再生/一時停止:

ReactInstanceManager displayInstanceManager = reactFragmentPresentation.getInstanceManager();

ReactContext displayContext = displayInstanceManager.getCurrentReactContext();

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

(「TogglePlayback」は、react-native ビューに対して発生するイベントの名前です)

私が見つけた問題は、ReactRootView によって読み込まれた反応ネイティブ ビューから、ルートの反応ネイティブ アプリケーションにインポートされた反応ネイティブ ライブラリにアクセスしようとすることです。メインの反応ネイティブ機能のメインの反応ネイティブ ライブラリにアクセスできますが、他のインポートは常に null として返されます。たとえば、「react-native-audio-toolkit」を使用して、2 番目の画面表示の react-native ビューで音楽を再生しようとしています。

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

次のエラーをスローします: 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"
            }
        }
    }
}

(上記のディレクトリの例は、$rootDir からネイティブ モジュールをインポートする react-native アプリケーションの場所です)

build.gradle にさまざまな更新を試みて、react-native-audio-toolkit ライブラリを含めましたが、これが問題の本当の原因であるかどうかはわかりません。反応ネイティブライブラリを提示された反応ネイティブビューに転送するために、上記のbuild.gradleから何かが欠けているかどうかは誰にも分かりますか? または、私が達成しようとしていることが可能である場合はどうなりますか?

反応ネイティブ プレゼンテーション ビューを独自の反応ネイティブ プロジェクトに分離することで問題を回避できると思いますが、可能であれば同じプロジェクトに保持したいと考えています。

4

0 に答える 0