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"
   

範例

安裝之後，請試試看 範例 。

來源

TwoPaneView 是開放原始碼元件，可在GitHub上使用。