React-native-router-flux: Menata NavBar

Salah saya, akan melakukan dokumentasi nanti (atau orang lain bisa melakukannya, itu akan sangat bagus) Untuk dokumen yang terlewat, lihat dokumen exNavigator - Router hanya meneruskan semua parameter ke komponen ExNavigator. Seperti yang saya lihat, Anda dapat menggunakan param navigationBarStyle.

Sepertinya exNavigator juga tidak memiliki dokumentasi :)
https://github.com/exponentjs/ex-navigator/issues/18

:+1:

Apakah navigationBarStyle berfungsi untuk Anda?

Menambahkan rightButtonStyle, backButtonBarStyle, rightButtonTextStyle serta renderLeftButton, renderRightButton, dan renderBackButton untuk menyesuaikan bilah navigasi.

navigationBarStyle sebagai properti Schema tidak berfungsi dengan baik. Sepertinya properti tidak diteruskan ke ExNavigator . Akan lebih baik untuk membuat properti ExNavigator tersedia juga, demi kelengkapan: titleStyle, barButtonTextStyle, barButtonIconStyle

navigationBarStyle adalah properti untuk Router, bukan untuk Route. Semua properti Router diteruskan ke ExNavigator, Anda dapat memeriksa sumber, itu harus bekerja di luar kotak.

Pasti ada sesuatu yang funky terjadi. Coba gunakan Skema ini dengan contoh:

            <Schema name="modal" navigationBarStyle={{backgroundColor: 'green'}} sceneConfig={Navigator.SceneConfigs.FloatFromBottom}/>
            <Schema name="default" navigationBarStyle={{backgroundColor: 'brown'}} sceneConfig={Navigator.SceneConfigs.FloatFromRight}/>
            <Schema navigationBarStyle={{backgroundColor: 'blue'}}  name="withoutAnimation"/>
            <Schema navigationBarStyle={{backgroundColor: 'red'}}  name="tab" type="switch" icon={TabIcon} />

Lalu pergi ke pengontrol tab dan beralih ke tab yang berbeda. Berapa banyak dari mereka yang memiliki batang merah?

Tidak apa-apa, saya salah membaca apa yang Anda tulis. Saya melihat bahwa properti berjalan dengan Router , bukan Schema . Maaf.

@aksonov mengujinya dan saya berhasil. Saya akan mencoba dan memodifikasi contoh dan melakukan penulisan sederhana

Saya memiliki beberapa permintaan penataan navbar, jika Anda tidak keberatan.

Bagaimana saya bisa mengubah statusBar menjadi putih? Juga, adakah cara untuk membunuh borderbottom navbar? Bisakah saya menghapusnya atau membuatnya sama dengan warna nav.

Saya juga ingin menghapus kata "home" dari leftText dan mengubah semua teks di Navbar menjadi putih.

Terima kasih sebelumnya.

Hmm ... Saya suka bagaimana ini dilakukan di react-native-redux-router ... di sana Anda dapat meneruskan komponen navbar Anda sendiri ke setiap rute. Apakah ini akan sangat sulit untuk diterapkan?

@igin Anda harus dapat meneruskan komponen navbar ke header={} di setiap router, setidaknya: https://github.com/aksonov/react-native-router-flux#router

@andreasbhansen Ya saya pikir Anda benar ... Ini akan membutuhkan sedikit desain ulang di pihak saya tetapi itu harus berhasil. Apakah rute diteruskan ke tampilan tajuk ini sebagai alat peraga? (maaf mungkin di luar topik untuk masalah ini)

Sekarang versi 2.0 melewati instance Router murni sebagai penyangga router.

@joshuarotenberg apakah Anda dapat mengatur gaya tombol kembali menjadi putih? Saya melewati backButtonBarStyle sebagai prop ke rute dan router dan juga tidak melakukan apa-apa.

@joelcloralt PR #118 harus di perbaiki, tolong di cek

Saya dapat mengkonfirmasi ini berfungsi. Hal utama yang perlu diperhatikan adalah ikon menggunakan tintColor dan teks menggunakan color sebagai gaya. Jadi bagi siapa pun yang ingin menyesuaikan Warna NavBar, inilah yang saya miliki:

Hingga rilis berikutnya, modifikasi ExRouter.js dengan komit ini: https://github.com/aksonov/react-native-router-flux/commit/b5b9b2f8a85285695869e0d21595293304f793fc

<Router navigationBarStyle={styles.navBar} titleStyle={styles.navBarTitle} barButtonTextStyle={styles.barButtonTextStyle} barButtonIconStyle={styles.barButtonIconStyle}>
 //some routes...<Route .... /> 
</Router>

Dan gaya:

navBar: {
    backgroundColor:'#0D47A1',
},
navBarTitle:{
    color:'#FFFFFF'
},
barButtonTextStyle:{
    color:'#FFFFFF'
},
barButtonIconStyle:{
    tintColor:'rgb(255,255,255)'
},

Saya percaya saya bisa menutupnya sekarang.

cara mengubah warna jam dan status wifi dan saya tidak tahu apa nama itu ... :)

  <Scene key="app" navigationBarStyle={{backgroundColor: '#1e2226'}}  titleStyle={{color : "#FFF"}}>
    <Scene  key="welcome" component={LauchContainer} title="Welcome" />
    <Scene key="counter" component={CounterContainer} title="dsfdsfdsf" />
  </Scene>

@alirezavalizade : Anda dapat membuat perubahan itu di xCode http://stackoverflow.com/a/35287747

bagaimana cara mengubah warna Backbutton di reaksi fluks router asli?

Saya mencoba backButtonBarStyle tetapi tidak berhasil ... saya tidak dapat menemukan solusi apa pun. tnx atas bantuan Anda

<Scene key="app"  navigationBarStyle={{backgroundColor: '#1e2226',borderBottomColor:"#1e2226"}}  titleStyle={{color : "#FFF"}}>
    <Scene  key="welcome" component={LauchContainer} title="Welcome" />
    <Scene key="ProductDetail"  backButtonBarStyle={{color : "#FFF"}} component={ProductDetail} />
  </Scene>

Gunakan barButtonTextStyle dan barButtonIconStyle seperti gaya berikut.

barButtonTextStyle: {
    color:'#F16B6F'
},
barButtonIconStyle: {
    tintColor:'#F16B6F'
},

@berkayk itu tidak berhasil untuk saya. Saya harus menggunakan backButtonTextStyle untuk mengubah warna teks.

Pastikan Anda melihat API_CONFIGURATION.md khusus untuk rilis yang Anda instal, mis

https://github.com/aksonov/react-native-router-flux/blob/3.30.1/docs/API_CONFIGURATION.md

@joelcloralt cara apa pun untuk menukar ikon tombol kembali default dengan salah satu milik Anda sendiri?

@robtg4 tergantung pada versi Anda. periksa dokumen API

halo, apakah ada cara untuk menata (mengubah ukuran, khususnya) navigationBarBackgroundImage?

Apakah ada cara untuk mengubah warna tombol menu?

Lihat dokumen API seperti yang disebutkan di atas

Anda dapat mengubah gambar ya, tetapi sepertinya tidak ada cara untuk hanya mengubah warna dari biru default. barButtonIconStyle={{ tintColor: '#fff' }} hanya mengubah tombol kembali chevron.

Bisakah saya hanya menghapus tombol kembali?

Sepertinya jika saya mendefinisikan navigationBarStyle berdasarkan status dan status berubah, bilah tidak diperbarui. Jika saya menambahkan kunci ke <Router> dan memperbarui kunci, maka saya dapat memaksa perubahan, tetapi ini terasa kotor. Apakah ada cara yang lebih baik?

Hai, yang di sana,
"Item bilah navigasi"

Saya ingin gambar dalam judul bukan teks. jadi, ketika saya menambahkan gambar menggunakan properti navigationBarTitleImage, itu akan ke sudut kiri atas. dan mencoba lebih banyak untuk masuk ke tengah menggunakan properti navigationBarTitleImageStyle, gambar diperbaiki tetapi ikon kanan dan kiri tidak terlihat atau kehilangan tempat aslinya.

jadi, cam saya mendapatkan solusi yang tepat silahkan.

@HubMahesh dapatkah Anda memposting kode yang Anda gunakan untuk navigationBarTitleImage?

import React from 'react'
import { Actions, Scene, StyleSheet } from 'react-native-router-flux'

const scenes = Actions.create(

    <Scene key="app" navigationBarStyle={{ backgroundColor: '#db342e' }}>
        <Scene key="drawer" component={NavigationDrawerComponentWrapper} open={false} >
            <Scene key="requiredBecauseOfDrawer">
                            <Scene key . . . />
                            //Scenes
            </Scene>
        </Scene>
    </Scene>
)

Tidak dapat mewarnai navBar Tolong Seseorang bantu!

Jadi untuk memperjelas jika saya memiliki beberapa teks sebagai tombol kanan saya di navbar, saya tidak dapat mengubah warnanya, benar?
Mengapa barButtonIconStyle berfungsi tetapi barButtonTextStyle tidak berfungsi?

Saya melampirkan gambar dan ini kode saya:

Router
sceneStyle={styles.sceneStyle}
backButtonTextStyle={styles.backButtonTextStyle}
barButtonIconStyle={styles.barButtonIconStyle}

gaya konstan = {
gaya adegan: {
bantalan Atas: 65
},
backButtonTextStyle: {
warna: '#2227b7'
},
barButtonIconStyle: {
warna warna: '#2227b7'
}
};

@ brownmagik352 -- Yang Anda cari adalah prop rightButtonTextStyle yang akan melakukannya.

@sicdigital terima kasih atas tipnya!

jadi barButtonIconStyle & rightButtonTextStyle mendapatkan apa yang saya cari:

Hallo teman-teman!

Apakah mungkin mengatur gaya untuk NavBar menjadi Komponen yang disebut Scene, tidak ada dalam atribut Scene Tag di Router Tag?

@aksonov Apakah mungkin untuk mengubah font di nav bar judul. Saya sudah mencoba

  <Router titleStyle={{ color: 'red', fontFamily: "pfencoresanspro_book" }} headerTitleStyle={{ color: 'blue', fontFamily: "pfencoresanspro_book" }}>

Tapi itu tidak bekerja

titleStyle pasti bekerja untuk saya dengan v4. Jika tidak berhasil, buat masalah terpisah untuk versi v4 dan beri saya tautan ke Contoh yang dikloning & dimodifikasi sehingga saya dapat mereproduksi masalah.

Sepertinya masalah dengan React Native seperti yang disebutkan di sini.
https://github.com/react-community/react-navigation/issues/542#issuecomment -283663786

Tidak, ini bekerja dengan baik di proyek saya. Mungkin Anda tidak mengimpor font Anda dengan benar melalui XCode

Saya dapat memperbaikinya menggunakan fontWeight: "100" seperti yang disebutkan dalam komentar. Font yang saya gunakan dalam format .otf dan normal sehingga RN tidak dapat mengubahnya menjadi huruf tebal

Saya menggunakan react-native-router-flux 4.0.0-beta.17 untuk proyek pembelajaran saya. Saya perlu menyesuaikan tajuk. misalnya warna latar belakang, perataan judul, dll. di mana saya dapat menemukan dokumen yang lengkap?

@sicdigital hai, di mana saya dapat menemukan dokumen lengkap tentang semua alat peraga?

Apakah ada cara untuk menonaktifkan teks dinamis di header? Ketika pengguna mengizinkan teks dinamis, saya dapat menonaktifkan ini di Adegan, tetapi saya tidak bisa di header. Saya berharap allowFontScaling={false} dapat diterapkan ke teks header.

Hanya untuk memperjelas semuanya.
Saya telah menata semuanya di header dengan cara ini:

navigasiBarStyle={styles.navBar}
titleStyle={styles.navBarTitle}
barButtonTextStyle={styles.barButtonTextStyle}
barButtonIconStyle={styles.barButtonIconStyle}
sceneStyle={styles.routerScene}
rightButtonStyle={styles.rightButton}
rightButtonTextStyle={styles.rightButtonText}
warnaWarna = 'putih'
headerBackTitle={'Tilbage'}
>

dan gaya:

gaya konstan = {
bilah navigasi: {
warna latar: '#ff8c00',
tinggi: 70
},
navBarTitle: {
warna: '#FFFFFF',
ukuran font: 20
},
barButtonTextStyle: {
warna merah'
},
barButtonIconStyle: {
warnaWarna: 'putih'
},
routerAdegan: {
bantalan Atas: 80,
},
tombol kanan: {
marginAtas: 5,
marginKanan: 5,
warna latar: 'putih',
batasRadius: 5,
lebar perbatasan: 1,
warna batas: '#00b8ff'
},
kananButtonTeks: {
warna: '#00b8ff'

}

`};

`
Begini tampilannya

Kita harus dapat memberikan router sebuah komponen untuk navbar , IMO. Ingin membuat latar belakang menjadi gradien (saat ini menggunakan backgroundColor transparan dengan komponen yang mendasarinya di tempat kejadian untuk meniru tampilan yang kita inginkan.

Adakah cara untuk membunuh batas bawah navbar? Bisakah saya menghapusnya atau membuatnya sama dengan warna nav.

Apakah Anda dapat memperbaiki ini?

Saya membuatnya bekerja dengan alat peraga berikut:

Adakah cara untuk membunuh batas bawah navbar? Bisakah saya menghapusnya atau membuatnya sama dengan warna nav.

Apakah Anda dapat memperbaiki ini?

juga mencari penyangga yang memungkinkan saya mengubah warna batas bawah