0
89
VistasLa navegación de reacción muestra el encabezado predeterminado con encabezado personalizado solo en Android
Tengo un error extraño en la aplicación nativa de reacción, escribí un encabezado personalizado, aparece con el encabezado predeterminado. Pero no son dos encabezados uno encima del otro, es solo el texto.
El primero es mi encabezado personalizado como este;
export const HeaderWithBackTitle = ({title}: {title: string}) => { const navigation = useNavigation(); const HeaderOptions: NativeStackNavigationOptions = { headerTitle: '', headerStyle: { backgroundColor: UIColors.darkMode, }, headerLeft: () => ( <View style={{alignItems: 'center'}} row backgroundColor={UIColors.darkMode}> <PressableOpacity marginL-12 onPress={() => navigation.goBack()}> <Image style={{width: 30, height: 30}} source={require('../imgs/backIcon.png')} /> </PressableOpacity> <View style={{maxWidth: '85%'}} marginL-30> <Text textColor darkGreyBlue regularText> {title} </Text> </View> </View> ), }; return HeaderOptions; };Lo presento así;
<Stack.Screen name="Entries" component={Entries} options={({route}) => HeaderWithBackTitle({title: route.params?.title})} />No tengo idea de cómo sucede.
Reaccionar versión nativa; 0.66.3 Reaccionar versión de navegación: ^ 0.6.6
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Se corrigió esto haciendo esto;
export const HeaderWithBackTitle = ({title}: {title: string}) => { const navigation = useNavigation(); const HeaderOptions: NativeStackNavigationOptions = { // headerTitle: '', <--- I was using this and it was working in older versions headerStyle: { backgroundColor: UIColors.darkMode, }, title: '', // <---- This line should be included headerLeft: () => ( <View style={{alignItems: 'center'}} row backgroundColor={UIColors.darkMode}> <PressableOpacity marginL-12 onPress={() => navigation.goBack()}> <Image style={{width: 30, height: 30}} source={require('../imgs/backIcon.png')} /> </PressableOpacity> <View style={{maxWidth: '85%'}} marginL-30> <Text textColor darkGreyBlue regularText> {title} </Text> </View> </View> ), }; return HeaderOptions; };Básicamente, necesito dar una cadena vacía a la propiedad "título". Es realmente sorprendente que no pude encontrar ninguna pregunta relacionada con esto, supongo que muchas personas todavía usan versiones antiguas.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta