React Native TwoPaneView untuk Surface Duo

  • Artikel

Anda dapat membuat tata letak dinamis dengan markup yang diperlihatkan di sini:

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

Dan panePriority fitur tata letak lainnya memungkinkan Anda mengontrol apa yang ditampilkan di setiap konfigurasi layar. Dokumentasi Windows TwoPaneView dan referensi API memberikan beberapa petunjuk tentang cara kerja kontrol (meskipun ingat bahwa kontrol masih dalam pratinjau!).

Penginstalan

Ikuti instruksi penginstalan react-native-twopaneview :

  1. Ubah android/build.gradle untuk menambahkan dukungan Kotlin:

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

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

  2. Jalankan npm install react-native-twopaneview untuk menambahkan paket.

  3. Ubah android:configChanges dengan menyertakan opsi ini:

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

Sampel

Setelah diinstal, coba sampel .

Sumber

TwoPaneView adalah komponen sumber terbuka, tersedia di GitHub.