如何更改后退按钮标签,反应导航

Question

我正在使用react-navigation,我无法更改默认"后退"按钮的区域设置.

在我的Stack Navigator中,如果我写下主页的标题,如果它不是太长,它将显示页面标题而不是"后退".

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

我怎样才能做到这一点 ？

Answer 1

从第 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 2

您可以使用headerBackTitleprop来控制后退按钮标题.

headerBackTitle

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

例

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

Answer 3

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

所以我传递了一个nulltoheaderBackTitle并设置了一个组件headerBackImage，我得到了我想要的 bellow UI：

所以写如下：

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

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

更新 (v5.x)

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

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

Answer 4

headerBackTitle = null并且headerBackTitle = ''两者都不适用于我的情况，但在第二个选项中添加单个空间就像headerBackTitle = ' '给了我想要的外观。它删除文本并添加单个空格。