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

您需要設置headerBackTitleVisible: false以隱藏后退按鈕標題。 它可以在 Screen 的options上，在 Navigator 的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 2

從版本 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 3

headerBackVisible：假

添加導航選項

Answer 4

headerBackTitle: false 對我有用。

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