从反应原生导航中删除元素答案

【问题标题】：Remove element from react-native navigation从反应原生导航中删除元素
【发布时间】：2020-10-15 00:14:58
【问题描述】：

只是想知道如何删除导航中的（后退）文本并仅使用箭头进行导航我正在使用 react native expo。

 <Stack.Screen
    name="ChatRoom"
    component={ChatRoomScreen}
    options={({route}) => ({
    
      title: route.params.name, 
      
      headerRight: () => (
        <View 
        style={{
          flexDirection: "row",
          width: 100,
          justifyContent: "space-between",
          marginRight: 10,
        }}
      >
     
          <MaterialIcons name="call" size={22} color={'white'} />
          <FontAwesome5 name="video" size={22} color={'white'} />
          <MaterialCommunityIcons name="dots-vertical" size={22} color={'white'}/>
        </View>
      )
    })}
  />

【问题讨论】：

标签： reactjs react-native react-native-android react-navigation react-native-navigation

【解决方案1】：

我发现反应导航有时表现得很奇怪。但首先，你可以试试这个：

headerBackTitle: ' ',

如果这导致后退箭头丢失，您可以像这样手动添加它：

headerBackImage: ()=> (<Icon name='chevron-left' color='#FFFFF' onPress={()=>{ navigation.goBack();}} />),

您还需要确保您的选项具有如下导航：

options={({route, navigation}) => ({

注意：我使用的图标来自 react-native-elements。

【讨论】：

【解决方案2】：

你需要

headerBackTitleVisible: false,

将此添加到options 喜欢

options={{
...
headerBackTitleVisible: false,
}}

证明：https://reactnavigation.org/docs/stack-navigator/#headerbacktitlevisible

【讨论】：