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

Question

我正在使用 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
    };
};

Answer 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()}
                    />
                )
            })}>

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

Answer 3

headerBackVisible：假

添加导航选项

Answer 4

我解决这个问题如下：

从“@react-navigation/native”导入 useNavigation：

import { useNavigation } from '@react-navigation/native';

从“@expo/vector-icons”导入羽毛：

import { Feather } from '@expo/vector-icons';

创建一个接收 useNavigation 的变量：

const navigation = useNavigation();

在 Stack.Screen 内，添加以下选项，这样它就会用您正在实现的新按钮替换 2 个平台（Android 和 iOS）的默认按钮：

  <Stack.Screen
    name="FinishOrder"
    component={FinishOrder}
    options={{
      title: 'Finishing',
      headerTitleStyle: {
        fontSize: 25,
        color: '#FFF'
      },
      headerTitleAlign: 'center',
      headerStyle: {
        backgroundColor: '#1D1D2E'
      },
      headerLeft: () => (
        <Feather
          name='arrow-left'
          size={35}
          onPress={() => navigation.goBack()}
          title="Voltar"
          color="#FF3F4B"
        />
      ),
    }} />

结果：

最终结果

Answer 5

除了这个之外，没有什么对我有用

headerBackButtonDisplayMode: "minimal",

Answer 6

headerBackTitle： false 对我有用。

<Stack.Navigator
  screenOptions={{
    headerBackTitle: false,
  }}
>