导航到另一个页面的后退按钮会导致底部选项卡消失并滑动错误的方向

Question

我在屏幕上添加了一个后退按钮，但由于某种原因，页面将向右而不是向左动画化，如下面的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')}>

Answer 1

正如HijenHEK所提到的，将其更改为navigation.goback((解决了这个问题。

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