如何更改后退按钮标签，react-navigation

Question

我正在使用 react-navigation，我无法更改默认 'back' 按钮的区域设置。

在我的 Stack Navigator 中，如果我写下主页的标题，如果它不是太长，它将显示页面标题而不是 'back'。

export const Root = StackNavigator({
Index: {
    screen: Index,
    navigationOptions: ({ navigation }) => ({
        title: "My App name", //Not working when too long
    }),
},

我该怎么做？

Answer 1

您可以使用 headerBackTitle 属性来控制返回按钮的标题。

headerBackTitle

Title string used by the back button on iOS, or null to disable label. Defaults to the previous scene's headerTitle

例子

const SomeNavigator = StackNavigator({
   Main: { screen: Main },
   Login: { 
     screen: Login,
     navigationOptions: {
       headerBackTitle: 'some label'
     }
   }
 });

Answer 2

实际上，当我react-navigation更新到第三版时，后退按钮出现了一个标题。

所以我将 null 传递给 headerBackTitle 并将组件设置为 headerBackImage 然后我得到了我想要的 UI:

所以这样写：

defaultNavigationOptions: {
  headerBackImage: <GoBack />,
  headerBackTitle: null,
};

提示：请使用defaultNavigationOptions代替navigationOptions。

更新（v5.x）

在较新的版本中，有 headerBackTitleVisible 选项键可以通过将其设置为 false 来获取布尔值，后面的标题将消失。

defaultNavigationOptions: {
  headerBackImage: <GoBack />,
  headerBackTitleVisible: false,
};

Answer 3

    UserProfile: {
    screen: UserProfile,
    navigationOptions: () => ({
      title:'Profile',
      headerBackImage: <Icon name="remove" 
                            size={25} 
                            color="white" />,
      headerTintColor: '#fff',
      headerRight:<Icon style={{paddingRight:30}}
                        name="edit" 
                        size={25} 
                        color="white"></Icon>,

     //headerTintColor: 'Colors.DarkBlue',
      headerStyle: {
        backgroundColor: '#0049b8',
        TextColor:'white',
      },
    }),
  },

Answer 4

headerBackTitle = null 和 headerBackTitle = '' 在我的情况下都不起作用，但在第二个选项中添加单个 space 就像 headerBackTitle = ' ' 给了我想要的外观。它删除了文本并添加了单个 space.

Answer 5

从版本 5 开始更新

从版本 5 开始，它是 screenOptions

中的选项 headerBackTitleVisible

用法示例：

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

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

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

Answer 6

<MyStack.Navigator
      screenOptions={{
        headerTruncatedBackTitle: 'translated back label',
      }}   
    >

版本5.x: 这个解决方案保留了 React Navigation 的实际行为。仅当路由名称太长时才显示后退按钮。

Answer 7

从 v5 开始，您可以像这样隐藏标题。

如何更改后退按钮标签，react-navigation

How to change the back button label, react-navigation

locale

react-native

react-navigation

更新（v5.x）