React Navigation，如何隐藏后退按钮标题？答案

【问题标题】：React Navigation, how to hide the back button title?React Navigation，如何隐藏后退按钮标题？
【发布时间】：2022-09-24 14:27:08
【问题描述】：

我正在使用 React Native 构建 Android 和 iOS 应用程序。我正在使用react-navigation 在屏幕之间导航。

问题是 iOS 上的导航与 Android 上的导航不同（下图）。我希望它们都像在 Android 上一样，那么如何从 iOS 中隐藏“搜索汽车”？

我已将导航选项设置如下：

Screen.navigationOptions = () => {

    const title = \'Search location\';

    return {
        headerTitleStyle: {
            fontSize: 18,
            color: styles.headerTitle.color,
            paddingTop: 5,
            height: 40
        },
        headerStyle: {
            backgroundColor: \'#fdfdfd\'
        },
        title
    };
};

stackoverflow.com/a/45027059/1283345

标签： javascript react-native react-navigation

【解决方案1】：

从版本 5 开始，它是 screenOptions 中的选项 headerBackTitleVisible

使用示例：

1. 在导航器中

<Stack.Navigator
  screenOptions={{
    headerBackTitleVisible: false
  }}
>
  <Stack.Screen name="route-name" component={ScreenComponent} />
</Stack.Navigator>

2.在屏幕上

如果您只想隐藏在单个屏幕中，您可以通过在屏幕组件上设置 screenOptions 来做到这一点，例如：

<Stack.Screen options={{headerBackTitleVisible: false}} name="route-name" component={ScreenComponent} />

3. 在屏幕导航选项

Screen.navigationOptions = ({ navigation }) => {
 headerTitle: 'Title',
 headerLeft: () =>
    <View>
      /* custom View here - back icon/back button text */
    </View
}

4.所有屏幕的导航器通用

import { HeaderBackButton } from '@react-navigation/elements';

 <Stack.Navigator
            screenOptions={({ navigation }) => ({
                headerLeft: () => (
                    <HeaderBackButton
                        labelVisible={false}
                        tintColor={'#FFF'}
                        onPress={() => navigation.goBack()}
                    />
                )
            })}>

【讨论】：

【解决方案2】：

您需要设置headerBackTitleVisible: false 来隐藏后退按钮标题。它可以在屏幕的options 上，在导航器的screenOptions 上，或者在您的情况下在Screen.navigationOptions 上。

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
    };
};

【讨论】：

【解决方案3】：

headerBackVisible：假

添加导航选项

【讨论】：