React Native TwoPaneView for 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"

サンプル

インストールしたら、 サンプル を試してみてください。

source

TwoPaneView はオープン ソース コンポーネントであり、GitHubで使用できます。