React Native TwoPaneView für Surface Duo

  • Artikel

Sie können ein dynamisches Layout mit dem hier gezeigten Markup erstellen:

<TwoPaneView panePriority={this.state.panePriority} panePriorityVerticalSpanning={this.state.panePriority} >
    {/* Pane A */}
    <MasterContent/>
    {/* Pane B */}
    <DetailContent/>
</TwoPaneView>

Mit panePriority den anderen Features des Layouts können Sie steuern, was in jeder Bildschirmkonfiguration angezeigt wird. Die Windows TwoPaneView-Dokumentation und -API-Referenz bieten einige Hinweise zur Funktionsweise des Steuerelements (obwohl sie sich noch in der Vorschau befindet).)

Installation

Folgen Sie den Installationsanweisungen für react-native-twopaneview :

  1. Ändern Sie android/build.gradle , um Kotlin-Unterstützung hinzuzufügen:

    buildscript {
  ext {
    ...
+   kotlinVersion = "1.3.50"
  }
...

  dependencies {
+   classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${kotlinVersion}")
...

  2. Führen Sie die Ausführung npm install react-native-twopaneview aus, um das Paket hinzuzufügen.

  3. Ändern android:configChanges Sie diese Optionen, indem Sie diese Optionen einschließen:

    android:configChanges="keyboard|keyboardHidden|orientation|screenSize|smallestScreenSize|screenLayout"

Beispiele

Geben Sie nach der Installation die Beispiele ein.

`Source`

TwoPaneView ist eine Open-Source-Komponente, die auf GitHub verfügbar ist.