React Native TwoPaneView для Surface Duo

  • Статья

Динамический макет можно создать с помощью разметки, показанной здесь:

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

Другие panePriority возможности макета позволяют управлять тем, что отображается в каждой конфигурации экрана. В документации Windows TwoPaneView и справочнике по API содержатся некоторые указания о том, как работает элемент управления (хотя помните, что он все еще находится в предварительной версии!).

Установка

Следуйте инструкциям по установке react-native-twopaneview :

  1. Измените android/build.gradle , чтобы добавить поддержку Kotlin:

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

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

  2. Выполните команду npm install react-native-twopaneview , чтобы добавить пакет.

  3. Измените, android:configChanges включив следующие параметры:

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

Примеры

После установки дайте примеры попробовать.

Источник

TwoPaneView — это компонент с открытым кодом, доступный в GitHub.