React Native TwoPaneView per Surface Duo

  • Articolo

È possibile creare un layout dinamico con il markup illustrato di seguito:

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

Le panePriority e altre funzionalità del layout consentono di controllare ciò che viene visualizzato in ogni configurazione dello schermo. La documentazione di Windows TwoPaneView e le informazioni di riferimento sulle API forniscono alcuni suggerimenti sul funzionamento del controllo( anche se tenere presente che è ancora in anteprima).)

Installazione

Seguire le istruzioni di installazione react-native-twopaneview :

  1. Modificare android/build.gradle per aggiungere il supporto di Kotlin:

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

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

  2. Eseguire npm install react-native-twopaneview per aggiungere il pacchetto.

  3. Modificare android:configChanges includendo queste opzioni:

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

Esempi

Dopo l'installazione, provare gli esempi .

Source (Sorgente)

TwoPaneView è un componente open source, disponibile in GitHub.