Saya mencoba untuk beralih layar menggunakan stack dan tab navigator.
const MainNavigation = StackNavigator({
otp: { screen: OTPlogin },
otpverify: { screen: OTPverification},
userVerified: {
screen: TabNavigator({
List: { screen: List },
Settings: { screen: Settings }
}),
},
});
Dalam hal ini stacknavigator digunakan terlebih dahulu dan kemudian tabnavigator. dan saya ingin menyembunyikan header dari stack navigator. WIt tidak berfungsi dengan baik ketika saya menggunakan opsi navigasi seperti:
navigationOptions: { header: { visible: false } }
Saya mencoba kode ini pada dua komponen pertama yang digunakan di stacknavigator. jika saya menggunakan baris ini maka mendapatkan beberapa kesalahan seperti:
sumber
options
prop seperti ini<Stack.Screen options={{ headerShown: false, }} name="Artist" component={Artist} />
Cukup gunakan kode di bawah ini di halaman yang ingin Anda sembunyikan headernya
lihat Stack Navigator
sumber
Cukup tambahkan ini ke dalam cuplikan kode kelas / komponen Anda dan Header akan disembunyikan
sumber
Jika layar Anda adalah komponen kelas
kode ini di layar yang Anda targetkan sebagai metode (fungsi) pertama.
sumber
header: () => null
adalah cara yang benar, jika tidak, Anda akan mendapatkan kesalahan header saat memuat halamanJika Anda ingin bersembunyi di layar tertentu daripada melakukan seperti ini:
sumber
Saya menggunakan
header : null
bukannyaheader : { visible : true }
saya menggunakan cli react-native. ini contohnya:sumber
Dalam solusi yang diberikan, Header disembunyikan untuk HomeScreen oleh- options = {{headerShown: false}}
sumber
Tambahkan objek navigationOptions baru di stackNavigator.
Coba ini :
Semoga membantu.
sumber
Jika seseorang mencari cara mengubah header jadi di componentDidMount tulis sesuatu seperti:
Kapan
Dan di suatu tempat ketika acara selesai pekerjaan:
sumber
Ini berhasil untuk saya:
sumber
sumber
Anda dapat menyembunyikan header seperti ini:
sumber
Ini berfungsi untuk navigasi tumpukan
sumber
Jika Anda hanya ingin menghapusnya dari satu layar
react-native-navigation
maka:sumber
sumber
Semua jawaban menunjukkan bagaimana melakukannya dengan komponen kelas, tetapi untuk komponen fungsional yang Anda lakukan:
Jika Anda menghapus header, komponen Anda mungkin berada di tempat-tempat yang tidak dapat Anda lihat (saat ponsel tidak memiliki layar persegi) jadi penting untuk menggunakannya saat menghapus header.
sumber
sumber
options={{ headerShown: false }}
bekerja untuk saya.**
"@react-navigation/native": "^5.0.7", "@react-navigation/stack": "^5.0.8",
sumber
Dalam navigasi react 5.x Anda dapat menyembunyikan header untuk semua layar dengan mengatur
headerMode
propNavigator
kefalse
.sumber
Anda dapat menyembunyikan header StackNavigator seperti ini:
sumber
Sangat penting untuk mencocokkan versi pustaka navigasi-reaksi yang Anda gunakan dengan solusi karena semuanya berbeda. Bagi mereka yang masih menggunakan react-navigation v1.0.0 karena alasan tertentu seperti saya, keduanya berfungsi:
Untuk menonaktifkan / menyembunyikan header di layar individu:
Untuk menonaktifkan / menyembunyikan semua layar sekaligus, gunakan ini:
sumber
Di versi terbaru navigasi-reaksi, ini berfungsi untuk menyembunyikan header di setiap layar: headerMode = {'none'}
sumber
untuk 4.x,
header: null
tidak digunakan lagi, harus digunakanheaderShown: false
gantinyaex:
sumber
Untuk satu layar, Anda dapat menyetel header: null atau headerShown: false di createStackNavigator seperti ini
Sembunyikan header dari semua layar sekaligus menggunakan defaultNavigationOptions
sumber
jika Anda ingin menghapus header dari semua layar, goto app.js dan tambahkan kode ini ke Stack.Navigator
sumber