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

【问题标题】：How to change the back button label, react-navigation如何更改后退按钮标签，react-navigation
【发布时间】：2018-04-02 13:27:38
【问题描述】：

我正在使用 react-navigation，我无法更改默认“后退”按钮的语言环境。

在我的 Stack Navigator 中，如果我为主页写下一个标题，并且如果它不太长，它将显示页面标题而不是“返回”。

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

我该怎么做？

【问题讨论】：

标签： react-native locale react-navigation

【解决方案1】：

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

headerBackTitle

iOS 上后退按钮使用的标题字符串，或 null 以禁用标签。默认为上一个场景的headerTitle

示例

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

【讨论】：

是否可以在登录屏幕代码中以编程方式进行？我想对其进行个性化并翻译...
您可能需要在App中createStackNavigator或StackNavigator的options部分（第二个参数）安排（headerBackTitle: null）。
如何设置默认headerBackTitle？如果我在我的堆栈导航器中指定它，那么所有屏幕都将具有该标题，但是当前一个屏幕的标题太长时，我只想要自定义标题返回标题

【解决方案2】：

更新至版本 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} />

【讨论】：

【解决方案3】：

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

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

所以写如下：

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

提示：请使用defaultNavigationOptions 而不是navigationOptions。

更新 (v5.x)

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

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

【讨论】：

设置 headerBackTitleVisible: false 为我工作
亲爱的@a_rahmanshah，这个答案是很久以前的，当时没有headerBackTitleVisible选项键。

【解决方案4】：

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

【讨论】：

对于4.3.x，选项headerBackTitleVisible: false 也有效。

【解决方案5】：

    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',
      },
    }),
  },

【讨论】：

【解决方案6】：

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

版本 5.x： 此解决方案保留了 React Navigation 的实际行为。仅当路径名称太长时才会显示返回按钮。

【讨论】：

【解决方案7】：

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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。