Переход на другую страницу для кнопки «Назад» приводит к исчезновению нижней вкладки и перемещению в неправильном направлении

#reactjs #react-native #react-navigation #react-navigation-stack

Вопрос:

Я добавил кнопку «Назад» на экран, но по какой-то причине страница будет анимироваться справа, а не слева, как в приведенном ниже gif. Я бы хотел, чтобы страница двигалась в другом направлении, создавая ощущение, что вы движетесь назад, а не вперед. У меня раньше не было этой проблемы. Кроме того, это приводит к тому, что нижняя вкладка полностью исчезает. Я использую стек и предоставил это ниже, а также всю другую необходимую информацию, которая, как я думаю, вам, ребята, нужна.

Спасибо вам за любую информацию вообще! Я ценю это больше, чем ты думаешь.

Я не уверен, что этой информации достаточно, чтобы по-настоящему ответить на мой вопрос. Пожалуйста, не стесняйтесь просить меня предоставить больше!

Стек

       <Stack.Navigator>        
        <Stack.Screen name="Home" component= {MyTabs} options={{headerShown: false}}/>
        <Stack.Screen name="ProfileScreen" component= {ProfileScreen} options={{headerShown: false}}/>
        <Stack.Screen name="VenueDetails" component= {VenueDetailsScreen} options={{headerShown: false}}/>
        <Stack.Screen name="ProfileSettings" component= {ProfileSettingsScreen} options={{headerShown: false}}/>
      </Stack.Navigator>
    </NavigationContainer>

 

Как я создал вкладку профиля

 <Tab.Screen
        name="Profile"
        component={profile}
        options={{
          tabBarLabel: 'Profile',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
 

Кнопка «Назад»

 <TouchableOpacity onPress={() => this.props.navigation.navigate('ProfileScreen')}>
 

Комментарии:

1. вы пробовали вернуться назад вместо навигации?

Ответ №1:

Как упоминал Хидженхек, изменение его на navigation.goback() устранило проблему.

 <TouchableOpacity onPress={() => this.props.navigation.goBack()}>