React Native用于 Surface Duo 的 TwoPaneView

可以使用此处所示的标记创建动态布局：

<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上使用。