Partager via

React Native TwoPaneView pour Surface Duo

  • Article

Vous pouvez créer une disposition dynamique avec le balisage indiqué ici :

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

Les panePriority autres fonctionnalités de la disposition vous permettent de contrôler ce qui est affiché dans chaque configuration d’écran. La documentation Windows TwoPaneView et les informations de référence sur l’API fournissent des conseils sur le fonctionnement du contrôle (même si vous n’oubliez pas qu’il est toujours en préversion!).

Installation

Suivez les instructions d’installation react-native-twopaneview :

  1. Modifiez android/build.gradle pour ajouter la prise en charge de Kotlin :

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

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

  2. Exécutez npm install react-native-twopaneview pour ajouter le package.

  3. Modifiez android:configChanges en incluant ces options :

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

Exemples

Une fois installé, donnez aux exemples un essai.

Source

TwoPaneView est un composant open source, disponible sur GitHub.