0
607
VistasReact Navigation, ¿cómo ocultar el título del botón Atrás?
Estoy usando React Native para crear una aplicación para Android e iOS. Estoy usando react-navigation para navegar entre pantallas.
El problema es que la navegación en iOS es diferente a la de Android (imagen de abajo). Quiero que ambos sean como en Android, entonces, ¿cómo puedo ocultar 'Buscar autos' de iOS?
He configurado las opciones de navegación de la siguiente manera:
Screen.navigationOptions = () => { const title = 'Search location'; return { headerTitleStyle: { fontSize: 18, color: styles.headerTitle.color, paddingTop: 5, height: 40 }, headerStyle: { backgroundColor: '#fdfdfd' }, title }; };2 Respuestas
Responde la pregunta0
Debe configurar headerBackTitleVisible: false para ocultar el título del botón Atrás. Puede estar en las opciones de una pantalla, en las options de pantalla de un navegador, o como en su caso dentro Screen.navigationOptions screenOptions
Screen.navigationOptions = () => { const title = 'Search location'; return { headerBackTitleVisible: false, // all you needed headerTitleStyle: { fontSize: 18, color: styles.headerTitle.color, paddingTop: 5, height: 40 }, headerStyle: { backgroundColor: '#fdfdfd' }, title }; };0
A partir de la versión 5, es la opción headerBackTitleVisible en screenOptions
Ejemplo de uso:
1. En Navegador
<Stack.Navigator screenOptions={{ headerBackTitleVisible: false }} > <Stack.Screen name="route-name" component={ScreenComponent} /> </Stack.Navigator>2. En pantalla
si solo desea ocultarse en la pantalla única, puede hacerlo configurando las opciones de pantalla en el componente de pantalla, vea a continuación, por ejemplo:
<Stack.Screen options={{headerBackTitleVisible: false}} name="route-name" component={ScreenComponent} />3. Opciones de navegación en pantalla
Screen.navigationOptions = ({ navigation }) => { headerTitle: 'Title', headerLeft: () => <View> /* custom View here - back icon/back button text */ </View }4. Común en navegador para todas las pantallas
import { HeaderBackButton } from '@react-navigation/elements'; <Stack.Navigator screenOptions={({ navigation }) => ({ headerLeft: () => ( <HeaderBackButton labelVisible={false} tintColor={'#FFF'} onPress={() => navigation.goBack()} /> ) })}>