Блог

Главная - Вопросы по программированию - Удалить элемент из встроенной навигации

Удалить элемент из встроенной навигации

#reactjs #react-native #react-native-android #react-navigation #react-native-navigation

#reactjs #react-native #react-навигация #react-native-навигация

Вопрос:

Просто интересно, как я могу удалить (обратный) текст в навигации и просто использовать стрелку для навигации, я использую 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>
      )
    })}
  />

введите описание изображения здесь

Ответ №1:

Я обнаружил, что react navigation иногда ведет себя странно. Но сначала вы можете попробовать это:

 headerBackTitle: ' ',

если из-за этого стрелка назад отсутствует, вы можете добавить ее вручную следующим образом:

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

вам также необходимо убедиться, что ваши параметры имеют такую навигацию:

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

Примечание: значок, который я использовал, из react-native-elements.

Ответ №2:

Вам нужно

 headerBackTitleVisible: false,

добавьте это в options like

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

Доказательство: https://reactnavigation.org/docs/stack-navigator/#headerbacktitlevisible