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

Question

我正在使用反应导航，我无法更改默认“后退”按钮的区域设置。

在我的堆栈导航器中，如果我写下主页的标题，并且它不太长，它将显示页面标题而不是“后退”。

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

我怎样才能做到这一点？

Answer 1

您可以使用

headerBackTitle

属性来控制后退按钮标题。

标题返回标题

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

headerTitle

示例

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

Answer 2

从版本 5 开始更新

从版本 5 开始，它是

headerBackTitleVisible

 中的选项 

screenOptions

使用示例：

<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 3

其实，当我更新

react-navigation

到版本三时，后退按钮会出现一个标题。

因此，我将

null

传递给

headerBackTitle

并将组件设置为

headerBackImage

，我得到了我想要的以下 UI：

所以写如下：

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

提示：请使用

defaultNavigationOptions

代替

navigationOptions

。

更新（v5.x）

在较新的版本中，有

headerBackTitleVisible

选项键，通过将其设置为

false

来获取布尔值，后面的标题将消失。

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

Answer 4

headerBackTitle = null

和

headerBackTitle = ''

在我的情况下都不起作用，但在第二个选项中添加单个空格，如

headerBackTitle = ' '

给了我想要的外观。它删除了文本并添加了单个空格。

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

Answer 6

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

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

Answer 7

使用

headerTruncatedBackTitle

更改截断的后标题。

Answer 8

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