React-native-router-flux: Cara menggunakan modal

Dibuat pada 3 Agu 2017  ·  16Komentar  ·  Sumber: aksonov/react-native-router-flux

Versi: kapan

  • reaksi-asli-router-flux v4b15
  • reaksi asli v46

Saya benar-benar berjuang dengan modals karena tidak ada dokumentasi tentang mereka dan contoh tidak memiliki komentar atau indikasi tentang bagaimana adegan tertentu ditampilkan secara modal dan yang lain tidak. Ini kode saya.

<Router>
  <Scene key="root" hideNavBar hideTabBar>
    <Scene key="tabBar" tabs>
      <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
      <Scene key="favorites" component={Favorites} title="Favorites" />
      <Scene key="messages" component={Messages} title="Messages" />
      <Scene key="profile" component={Profile} title="Profile" />
    </Scene>
    <Scene key="modal" modal>
      <Scene key="map" component={Map} title="Map" hideNavBar />
    </Scene>
    <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
  </Scene>
</Router>;

Saya mencoba agar komponen Peta ditampilkan secara modal.

MapButton adalah sebagai berikut:

const MapButton = () =>
  <TouchableWithoutFeedback onPress={Actions.map}>
    <Text>Map</Text>
  </TouchableWithoutFeedback>;

Saya harus menggunakan ini karena rightText sangat bermasalah dan tidak akan merender separuh waktu.

Komentar yang paling membantu

Terima kasih, ini memperbaiki masalah. Bagaimana Anda mengharapkan saya untuk memahami sesuatu ketika tidak ada garis dokumentasi tentang hal itu? Ada banyak orang yang membuka masalah tentang fitur modal ini, mungkin itu indikasi perlunya dokumen...

Semua 16 komentar

Coba masukkan adegan root Anda di dalam modal.
Seperti ini:

<Router>
    <Scene key="modal" modal>
       <Scene key="root" hideNavBar hideTabBar>
            <Scene key="tabBar" tabs>
              <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
              <Scene key="favorites" component={Favorites} title="Favorites" />
              <Scene key="messages" component={Messages} title="Messages" />
              <Scene key="profile" component={Profile} title="Profile" />
            </Scene>
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />

Anda harus membuat adegan root sebagai modal seperti yang disarankan @luco . Silakan periksa Contoh proyek, Login diimplementasikan sebagai modal

Ini masih tidak berhasil.

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
      </Scene>
    </Scene>
  </Router>

Tidak masuk akal bagi saya bahwa membungkus semua yang ada di adegan modal akan membuat satu modal adegan tertentu ketika saya tidak ingin sisanya (seperti ListingDetail) menjadi modal. Apakah ada parameter khusus di Actions.map yang perlu saya gunakan?

Sayangnya ini adalah masalah navigasi reaksi - ini tidak mendukung animasi yang berbeda untuk anak-anak tumpukan. Saya tidak dapat mereproduksi masalah Anda (kode terlihat baik-baik saja), itu sebabnya saya meminta semua orang untuk melakukan fork & memodifikasi contoh repo ini jika mereka ingin masalah mereka diselesaikan. Modal masuk dari Contoh berfungsi dengan baik seperti yang Anda lihat

Jadi, apakah Anda mengatakan bahwa tidak ada cara untuk mendukung transisi modal iOS? Yaitu salah satu yang meluncur dari bawah?

Maksud kamu apa? Saya katakan dua kali bahwa Contoh memiliki layar modal Login (yang meluncur dari bawah)

Ok tetapi Anda juga mengatakan kode saya terlihat baik-baik saja ....

Saya telah mencoba yang terbaik untuk mengikuti Contoh tetapi karena tidak ada dokumentasi, saya tidak tahu apa alasan semua yang ada di sana. Saya tidak bisa hanya menyalin dan menempelkan kode itu karena jelas rute saya berbeda.

Hal yang sama saya dapat memberi tahu Anda tentang kode Anda - saya tidak melihat seluruh proyek dan semua detail. Misalnya Anda dapat menggunakan Actions.map dan itu bahkan tidak dihasilkan (dan menjadi nol) selama kompilasi.

Saya senang memberikan lebih banyak contoh kode jika Anda memberi tahu saya apa yang Anda butuhkan. Actions.map berfungsi, itu hanya transisi dari sisi dalam dari apa yang saya harapkan dari bawah.

Apakah Anda mengatakan bahwa Anda tidak dapat memiliki transisi push dan modal di aplikasi yang sama?

YA AMPUN. Tidak dalam aplikasi, tetapi dalam satu wadah. Setelah melihat lebih dalam kode Anda memiliki kesalahan - 'peta' masih anak dari wadah 'normal' (key=root), bukan modal (key='modal'). Sepertinya Anda tidak mengerti apa yang Anda lakukan. Mungkin komponen ini terlalu rumit untuk Anda...

Coba ini:

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
      </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
    </Scene>
  </Router>

Terima kasih, ini memperbaiki masalah. Bagaimana Anda mengharapkan saya untuk memahami sesuatu ketika tidak ada garis dokumentasi tentang hal itu? Ada banyak orang yang membuka masalah tentang fitur modal ini, mungkin itu indikasi perlunya dokumen...

Beberapa posting terbaru di sini adalah tentang sintaks JSX dan pemahaman tentang wadah navigasi, bukan tentang dokumentasi.
Saya menambahkan lebih banyak informasi tentang modal.

Hai,

bekerja untuk saya

<Router navigationBarStyle={{backgroundColor: '#FF5722'}} titleStyle={{color: '#fff'}}>
        <Modal>
            <Stack key="root">
                <Scene key='login_screen' component={LoginScreen} title='login' hideNavBar={true} />
            </Stack>
            <Scene key='cadastro_screen' component={CadastroScreen} title='Cadastro' hideNavBar={false} />
        </Modal>
</Router>

Ketika saya menambahkan pembungkus modal, saya kemudian mendapatkan 2 navbar di bagian atas tampilan saya, ketika saya menambahkan hideNavBar keduanya menghilang. Bagaimana saya bisa mengatasi masalah ini Saya ingin satu bilah tab saja bukan dua yang jelas ... ?

Gunakan <Modal hideNavBar> karena <Modal> akan menambahkan navbar-nya sendiri sehingga Anda akhirnya memiliki dua dengan satu dari adegan root Anda.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

fgrs picture fgrs  ·  3Komentar

jgibbons picture jgibbons  ·  3Komentar

moaxaca picture moaxaca  ·  3Komentar

booboothefool picture booboothefool  ·  3Komentar

VictorK1902 picture VictorK1902  ·  3Komentar