如何更改返回按钮标签，react-navigation

7kjnsjlb 于 12个月前发布在 React

关注(0)|答案(8)|浏览(129)

我使用的是react-navigation，无法更改默认的“后退”按钮的区域设置。
在我的堆栈导航器中，如果我写下主页的标题，如果它不是太长，它将显示页面标题而不是“返回”。

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

我怎么能这么做呢？

react-native

来源：https://stackoverflow.com/questions/46864951/how-to-change-the-back-button-label-react-navigation

8条答案

按热度按时间

pw136qt21#

你可以使用headerBackTitle prop来控制后退按钮的标题。

headerBackTitle

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

示例

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

赞(0）回复(0）举报 12个月前

myzjeezk2#

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

赞(0）回复(0）举报 12个月前

kuhbmx9i3#

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

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

就像下面这样写：

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

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

更新（v5.x）

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

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

赞(0）回复(0）举报 12个月前

oyjwcjzk4#

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

赞(0）回复(0）举报 12个月前

to94eoyn5#

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

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

赞(0）回复(0）举报 12个月前

ftf50wuq6#

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

赞(0）回复(0）举报 12个月前

ds97pgxw7#

使用headerTruncatedBackTitle来更改截断的后标题。

赞(0）回复(0）举报 12个月前

dohp0rv58#

在V5中，你可以像这样隐藏标题。
<Stack.Navigator screenOptions={{ headerBackTitleVisible：联系我们

赞(0）回复(0）举报 12个月前