Сброс StackNavigator внутри createBottomTabNavigator на tabBarOnPress
У меня есть эта структура:
нижняя вкладка Навигатор:
- Экран 1
- Экран 2
- Экран А
- Экран B
Когда пользователь переходит к экрану B, затем переходит к экрану 1 и возвращается к экрану 2, он переходит прямо в экран B, как я могу сбросить стек с помощью функции tabBarOnPress, чтобы заставить пользователя вернуться к экрану A?
Я использую реактивную навигацию 3.0.9, я попробовал несколько кодов, но получил ошибки, и я думаю, что это связано с версией.
Моя структура кода:
const Navigator = createBottomTabNavigator({
Screen1: {
screen: Screen1,
navigationOptions: () => ({
tabBarOnPress...
})
},
Screen2: {
screen: Screen2,
navigationOptions: () => ({
tabBarOnPress...
})
}
})Вы пробовали мое предложенное решение здесь, в ответах?
Ответы 4
Как указано в пояснении здесь. вы можете выполнить действие сброса при нажатии на вкладку следующим образом:
import { StackActions, NavigationActions } from 'react-navigation';
const resetAction = StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Profile' })],
});
this.props.navigation.dispatch(resetAction);
Итак, вы должны сделать что-то вроде:
tabBarOnPress{() => StackActions.reset({
index: 0,
actions: [NavigationActions.navigate({ routeName: 'Screen1' })],
})};
Это не сработало. Теперь я использую Redux и componentWillReceiveProps() для обновления экрана.
Итак, ответ уже есть, но этот может помочь некоторым людям. Вы можете использовать свойство createBottomTabNavigator, resetOnBlur и установить для него значение true. По умолчанию он имеет значение false, и поэтому он всегда сохраняет состояние в каждом навигаторе вкладок.
В новой версии можно использовать опцию 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/
Решение 1:
import { StackActions } from '@react-navigation/native';
if (this.props.navigation.canGoBack())
{
this.props.navigation.dispatch(StackActions.popToTop());
}
Решение 2:
используйте реквизит unmountonblur на вкладке, как это
<Tab.Navigator
>
<Tab.Screen
name='User'
component = {ProfileModule}
options = {{ unmountOnBlur: true }}
/>
</Tab.Navigator>
Я знаю, что это сбивает с толку, но на самом деле тег здесь должен быть react-navigation, поскольку react-native-navigation — это встроенная реализация навигации Wix для react, а react-navigation — это навигационное решение на основе JS для react-native.