我有这样的结构:
底部Tab导航器:
- 屏幕 1
- 屏幕 2
- 屏幕A
- 屏幕 B
当用户导航到屏幕 B,然后转到屏幕 1 并返回屏幕 2 时,他直接进入 B,如何使用 tabBarOnPress 函数重置堆栈以强制用户返回 A?
我使用的是react-navigation 3.0.9,我尝试了一些代码,但出现了错误,我认为这是由于版本所致。
我的代码结构:
const Navigator = createBottomTabNavigator({
Screen1: {
screen: Screen1,
navigationOptions: () => ({
tabBarOnPress...
})
},
Screen2: {
screen: Screen2,
navigationOptions: () => ({
tabBarOnPress...
})
}
})
最佳答案
在新版本中,您可以对屏幕使用unmountOnBlur选项。有一些代码示例:
<NavigationContainer>
<Tab.Navigator tabBarOptions={{
activeTintColor: ThemeConstants.mainColor,
}}>
<Tab.Screen name="Categories" component={CategoriesStackScreen}
options={{
unmountOnBlur:true
tabBarLabel: translate('Categories'),
tabBarIcon: ({color, size}) => (
<Icon style={[{color: color}]} type='MaterialIcons' name='restaurant-menu'/>
),
}}
/>
<Tab.Screen name="Info" component={InfoStackScreen}
options={{
unmountOnBlur:true,
tabBarLabel: translate('Info'),
tabBarIcon: ({color, size}) => (
<Icon style={[{color: color}]} type='MaterialIcons' name='info-outline'/>
),
}}
/>
<Tab.Screen name="Account" component={AccountStackScreen}
options={{
unmountOnBlur:true,
tabBarLabel: translate('Account'),
tabBarIcon: ({color, size}) => (
<Icon style={[{color: color}]} type='Feather' name='user'/>
),
}}/>
<Tab.Screen name="CartStackScreen" component={CartStackScreen}
options={{
unmountOnBlur:true,
tabBarBadge: (quantity && quantity>0)?quantity:null,
tabBarLabel: translate('Cart'),
tabBarIcon: ({color, size}) => (
<Icon style={[{color: color}]} type='Feather' name='shopping-cart'/>
),
}}
/>
</Tab.Navigator>
</NavigationContainer>
还有描述该属性的链接 https://reactnavigation.org/docs/bottom-tab-navigator/
关于react-native - 在 tabBarOnPress 上的 createBottomTabNavigator 内重置 StackNavigator,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54260030/