0
243
Viewscómo eliminar la barra blanca en la parte superior de mi aplicación nativa de reacción
Así es como se ve la aplicación, con un encabezado blanco en la parte superior
Aplicación.js
import { StatusBar } from 'expo-status-bar'; import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import LoginScreen from './screens/LoginScreen'; import HomeScreen from './screens/HomeScreen'; import RegisterScreen from './screens/RegisterScreen'; import AddProduct from './screens/AddProduct'; import PorductView from './screens/PorductView'; import ResetPassword from './screens/ResetPassword'; import Options from './screens/Options'; import { LogBox } from 'react-native'; import MyProducts from './screens/MyProducts'; const Stack = createNativeStackNavigator(); export default function App() { LogBox.ignoreLogs(['Setting a timer']); return ( <> <NavigationContainer> <Stack.Navigator> <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="Home" component={HomeScreen} /> <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="AddProduct" component={AddProduct} /> <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="ViewProduct" component={PorductView} /> <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="ResetPassword" component={ResetPassword} /> <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="MyProducts" component={MyProducts} /> <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="Option" component={Options} /> <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="Login" component={LoginScreen} /> <Stack.Screen options={{ headerShown: false, headerTransparent: true }} name="Register" component={RegisterScreen} /> </Stack.Navigator> </NavigationContainer> <StatusBar style="auto"/> </> ); }como puede ver, tengo headerShown: false y solo elimina el botón de retroceso predeterminado en el emulador de Android e iOS, pero no elimina el espacio en blanco que está en la parte superior
3 answers
Answer question0
Si desea ocultar la barra de estado de su aplicación, en la raíz de su aplicación (por ejemplo, en App.js o App.tsx) coloque la barra de estado como se muestra a continuación:
/* * Your imports and another codes */ import {StatusBar} from 'react-native'; const App = () => { return ( <> <StatusBar hidden /> { //Your components } </> ); }Y si desea ocultar el encabezado del navegador de pila predeterminado (versión 6) en todas las pantallas:
//... <Stack.Navigator screenOptions={{ headerShown: false, }}> { //Your screens without extra hiding options } </Stack.Navigator> //...0
Use headerMode="none" en Navigator
<Stack.Navigator headerMode="none" > ... </Stack.Navigator>0
Aparentemente, el headerShown que se muestra está configurado en Stack.Navigator, no dentro de cada Stack.Screen
<Stack.Navigator screenOptions={{ headerShown: false }} >ver más detalles aquí https://stackoverflow.com/a/44701363/1461862