【问题标题】: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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2018-04-17
        • 2021-03-23
        • 2017-06-09
        • 2020-11-26
        相关资源
        最近更新 更多