导航到另一个页面的后退按钮会导致底部选项卡消失并向错误的方向滑动
Navigate to another page for back button causes bottom tab to disappear and swipes wrong direction
我已经在屏幕上添加了一个后退按钮,但出于某种原因,页面将向右移动而不是向左移动,如下面的 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')}>
正如 HijenHEK 所提到的,将其更改为 navigation.goback() 解决了这个问题。
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>
我已经在屏幕上添加了一个后退按钮,但出于某种原因,页面将向右移动而不是向左移动,如下面的 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')}>
正如 HijenHEK 所提到的,将其更改为 navigation.goback() 解决了这个问题。
<TouchableOpacity onPress={() => this.props.navigation.goBack()}>