React-native-router-flux: Bagaimana gaya Nav Bar?

@aksonov ini akan sangat membantu saya juga. Saya ingin menggunakan gaya Android dan sepertinya jauh lebih sedikit pekerjaan untuk melakukan ini daripada membuat tajuk khusus.

Terima kasih untuk proyek ini btw... sempurna!

Anda dapat mengubah warna latar belakang navbar pada Router .

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle} sceneStyle={styles.routerScene}>
    <Schema .../>
    <Route .../>
</Router>

const styles = StyleSheet.create({
  navBar: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'red', // changing navbar color
  },
  navTitle: {
    color: 'white', // changing navbar title color
  },
  routerScene: {
    paddingTop: Navigator.NavigationBar.Styles.General.NavBarHeight, // some navbar padding to avoid content overlap
  },
})

@pewh Apakah ini mungkin dengan Router bersarang? Saya mencoba memiliki Bilah Navigasi dengan gaya berbeda untuk layar yang berbeda. Misalnya, satu layar mungkin memiliki navbar hijau dan yang lain mungkin memiliki navbar merah.

Kode di bawah ini merutekan dengan benar, namun tidak ada gaya yang diterapkan ke bilah navigasi di rute masuk .

`< Router>

            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.navBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
            </Route>
        </Router>`

const styles = StyleSheet.create({ navBar: { flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', backgroundColor: 'green', }, navTitle: { color: 'white', } });

Maaf untuk gaya yang buruk ... Saya tidak tahu bagaimana memformatnya dengan benar.

Terima kasih @pewh ! terima kasih kepada Anda, saya baru tahu bahwa saya tidak dapat menyesuaikan bilah navigasi karena tumpang tindih itu, terkadang saya berhasil menyesuaikan bilah navigasi dengan menyulap dengan atribut hideNavBar dan showNavigationBar.
Namun, mengikuti panduan Anda, bilah nav disesuaikan dengan baik tetapi ketika saya beralih di antara tab, bilah nav menampilkan nama tab sebelumnya sebagai ganti tombol "kembali". Ini kode saya, bisakah Anda membantu saya menemukan kesalahannya?

<Router name="root" hideNavBar={true} showNavigationBar={false} navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} sceneStyle={styles.routerScene} >
              <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
              <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
              <Schema name="tab" type="switch" icon={TabIcon} />

              <Route name="register" schema="modal" component={registerComponent} />
              <Route name="login" schema="modal" component={loginComponent} />

              <Route name="tabbar" style={styles.tabBar} >
                  <Router navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle}>
                    <Route name="newsFeed" schema="tab" title="News" component={newsFeedComponent} />
                      <Route name="notifications" schema="tab" title="Notif." component={notificationsComponent} />
                      <Route name="events" schema="tab" title="Events" component={eventsComponent} />
                  </Router>
              </Route>
          </Router>

Harap Dicatat, jika saya mengubah hideNavBar dan showNavigationBar, saya mendapatkan output berikut:

• hideNavBar={true} showNavigationBar={true} : 2 bilah navigasi bergaya, yang paling atas hanya dengan tombol "Kembali" (<) dan yang paling bawah dengan judul dan tombol kembali "< _Judul layar sebelumnya_" (bahkan ketika beralih antar tab)
• hideNavBar={false} showNavigationBar={true} : idem dari di atas
• hideNavBar={true} showNavigationBar={false} : 1 bilah navigasi bergaya, dengan judul dan tombol kembali "< _Judul layar sebelumnya_" (bahkan ketika berpindah antar tab)
• hideNavBar={false} showNavigationBar={false} : idem dari di atas

Saya tidak dapat benar-benar memahami perbedaan antara hideNavBar dan showNavigationBar dan dampaknya untuk mendapatkan hasil yang diharapkan : 1 bilah bergaya dengan Judul Layar dan Tombol Kembali yang akan muncul hanya ketika layar "bertumpuk" ditangani, bukan saat beralih antar tab.

Terima kasih banyak atas bantuannya

Hai @thngdude , Anda dapat menata navbar di setiap Router . Lihat ini di bawah untuk melihat apa yang saya maksud. Saya belum menguji kode ini di bawah, jadi beri tahu saya jika ada yang salah.

        <Router>
            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.greenNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
                <Router navigationBarStyle={styles.redNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signupmain" component={SignUp} title="SignUp"/>
                </Router>
            </Route>
        </Router>

atau lakukan ini jika di atas tidak berhasil.

        <Router>
            <Route hideNavBar={true} name="launch" component={Launch} initial={true} wrapRouter={true} title="Launch"/>
            <Route name="signin">
                <Router navigationBarStyle={styles.greenNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signinmain" component={SignIn} title="SignIn"/>
                </Router>
            </Route>

            <Route name="signup">
                <Router navigationBarStyle={styles.redNavBar} titleStyle={styles.navTitle}>
                    <Route hideNavBar={false} name="signupmain" component={SignUp} title="SignUp"/>
                </Router>
            </Route>
        </Router>

Ps: Bungkus dengan triple backtick alih-alih satu backtick ( ` ) untuk memformat kode multiline.

Hai @KBLNY , senang bisa membantu masalahmu :smile:
Sepertinya Anda lupa memasukkan footer prop di Router di dalam rute tabbar.
Jadi kode Anda seharusnya:

Router name="root" hideNavBar={true} showNavigationBar={false} navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} sceneStyle={styles.routerScene} >
              <Schema name="modal" sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
              <Schema name="default" sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
              <Schema name="tab" type="switch" icon={TabIcon} />

              <Route name="register" schema="modal" component={registerComponent} />
              <Route name="login" schema="modal" component={loginComponent} />

              <Route name="tabbar" style={styles.tabBar} >
                  <Router footer={TabIcon}  navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle}>
                    <Route name="newsFeed" schema="tab" title="News" component={newsFeedComponent} />
                      <Route name="notifications" schema="tab" title="Notif." component={notificationsComponent} />
                      <Route name="events" schema="tab" title="Events" component={eventsComponent} />
                  </Router>
              </Route>
          </Router>

dan jangan lupa sertakan komponen TabIcon.

class TabIcon extends React.Component {
    render(){
        return (
            <Text style={{color: this.props.selected ? 'red' :'black'}}>{this.props.title}</Text>
        );
    }
}

Saya belum mengujinya, tetapi seharusnya berfungsi.

Hai teman-teman, setiap PR tentang peningkatan dokumen akan sangat membantu, terima kasih.

@pewh Terima kasih, saya mencoba saran Anda, dan

Terima kasih @pewh, saya berhasil. Namun, untuk mendapatkan gaya dan transisi Android menjadi agak sulit. Ini sepertinya masalah mantan navigator yang mendasari https://github.com/exponentjs/ex-navigator/issues/24 akan menyelesaikan ini. Idealnya jika pengguna menggunakan Android dan hideNavBar={false} disetel... seharusnya terlihat seperti Android.

Sepertinya Navigator.NavigationBar.StylesAndroid membuka sekaleng worm dan seluruh NavigatorBar didokumentasikan dengan buruk. Saya benar-benar tidak punya waktu untuk tenggelam ke dalamnya saat ini jadi saya mungkin mencoba dan menemukan komponen NavBar lain sebagai gantinya.

*edit*

Menggali lebih dalam built in ToolbarAndroid akan ke tiket. Menggunakan prop header bawaan Anda akan memungkinkan saya untuk mengintegrasikan ini.

https://github.com/facebook/react-native/blob/master/Examples/Movies/MoviesApp.android.js#L50 -L56

3.0 dirilis dengan dokumen yang ditingkatkan. Menutupnya untuk saat ini, karena untuk versi lama (2.x)

@alirezavalizade Saya akan menggunakan komponen StatusBar pada halaman yang memiliki latar belakang gelap:
https://facebook.github.io/react-native/docs/statusbar.html

Bagaimana cara menghapus, seperti apa sekitar 20 piksel padding, di bagian atas NavBar jika aplikasi Anda tidak menampilkan Status Bar? Saya sudah mencoba top: -10, dan marginTop: 0, dll. Tapi sepertinya tidak menyelaraskanItems (tombol kembali dan judul) dengan benar ke tengah baris.

apakah mungkin menambahkan tombol khusus ke navbar sama sekali?

@robtg4 Saya juga bertanya-tanya, contoh navbar di sini sangat membingungkan karena saya baru memulai.

Yah saya telah membuat satu plugin untuk itu digunakan penuh untuk mencapai apa yang Anda inginkan.
Baik Statusbar atau Warna Navbarnya

https://github.com/BhavanPatel/react-native-navbar-color

https://www.npmjs.com/package/react-native-navbar-color

@BhavanPatel , apakah ini berfungsi untuk iOS?

@alexpavlovaskblue Ya, Silakan periksa Readme plugin. Terima kasih

Cara lain yang memungkinkan untuk mengubah warna latar belakang Bilah Status dan Bilah Navigasi Perangkat Android adalah melalui modul StatusBar dan NativeModules

dan Anda dapat memeriksa tautan jawaban di bawah ini

https://stackoverflow.com/a/66415888/10646511