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

Question

我正在使用反应导航，而我无法更改默认＆＃39;返回＆＃39;的区域设置。按钮。

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

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

我该怎么做？

Answer 1

您可以使用headerBackTitle道具来控制后退按钮标题。

  

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

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

Answer 4

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

因此我将null传递给headerBackTitle并将组件设置为headerBackImage，然后得到了所需的以下UI：

所以写如下：

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

提示：请使用defaultNavigationOptions代替navigationOptions。

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 的实际行为。返回按钮仅在路线名称太长时显示。