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で使用できます。