React Native TwoPaneView para Surface Duo

  • Artículo

Puede crear un diseño dinámico con el marcado que se muestra aquí:

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

Las panePriority características y otras características del diseño le permiten controlar lo que se muestra en cada configuración de pantalla. La documentación Windows TwoPaneView y la referencia de API proporcionan algunas sugerencias sobre cómo funciona el control (aunque recuerde que todavía está en versión preliminar).

Instalación

Siga las instrucciones de instalación react-native-twopaneview :

  1. Modifique android/build.gradle para agregar compatibilidad con Kotlin:

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

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

  2. Ejecute npm install react-native-twopaneview para agregar el paquete.

  3. Modifique android:configChanges mediante la inclusión de estas opciones:

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

Ejemplos

Una vez instalado, pruebe los ejemplos .

Source

TwoPaneView es un componente de código abierto, disponible en GitHub.