0
298
Vistas¿Cómo eliminar los estilos predeterminados de react-navigation?
Estaba haciendo una aplicación con react native y react-navigation. Entonces, lo que hice fue crear una pantalla de inicio de sesión. Luego usé react-navigation para crear un navegador de pila nativo y lo vinculé a mi pantalla de inicio de sesión. Representé con éxito la pantalla de inicio de sesión, pero parece haber algún tipo de estilo predeterminado en el navegador de pila (?). ¿Cómo elimino o sobrescribo esos estilos para recuperar el estilo original de mis pantallas? Imágenes y código a continuación.
Este es el navegador de pila
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import LoginScreen from '../screens/LoginScreen'; import SignUpScreen from '../screens/SignUpScreen'; const Stack = createNativeStackNavigator(); const AuthStack = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Login" screenOptions={{ header: () => null }}> <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Signup" component={SignUpScreen} /> </Stack.Navigator> </NavigationContainer> ); }; export default AuthStack;Cuando solo renderizo la pantalla de inicio de sesión, se ve así
Cuando uso AuthStack se ve así 
2 Respuestas
Responde la pregunta0
Debería haber leído bien los documentos, estaba allí en las opciones de NativeStackNavigator.
import React from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; import LoginScreen from '../screens/LoginScreen'; import SignUpScreen from '../screens/SignUpScreen'; const Stack = createNativeStackNavigator(); const AuthStack = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Login" screenOptions={{ headerShown: false, header: () => null, contentStyle: { backgroundColor: 'white' }, }} > <Stack.Screen name="Login" component={LoginScreen} /> <Stack.Screen name="Signup" component={SignUpScreen} /> </Stack.Navigator> </NavigationContainer> ); }; export default AuthStack;0
Para hacer tu propio estilo haz esto
import { createStackNavigator } from "@react-navigation/stack"; import { NavigationContainer, DefaultTheme } from "@reactnavigation/native"; const MyTheme = { ...DefaultTheme, colors: { ...DefaultTheme.colors, background: Color.red, }, };Entonces haz esto
<NavigationContainer theme={MyTheme}> <Stack.Navigator initialRouteName="startscreen" headerMode="none" > </Stack.Navigator> </NavigationContainer>Más información aquí ( https://reactnavigation.org/docs/themes/ )