Сброс стека внутри вкладки на вкладке двойным нажатием с помощью React Navigation 5 - PullRequest
Новая
       90

Сброс стека внутри вкладки на вкладке двойным нажатием с помощью React Navigation 5

1 голос
/ 03 марта 2020

Мне интересно, как сбросить стек внутри BottomTabNavigator, если вкладка сфокусирована и нажата.

Это код, который у меня есть до сих пор: 

const Stack = createStackNavigator<MainStackParams>()
const BottomTab = createBottomTabNavigator<TabNavigatorParams>()
const navigationRef = React.useRef()

> Blockquote

<NavigationContainer ref={navigationRef}>
    <Stack.Navigator mode="modal">
            <Stack.Screen
                name={MainAppRoute.BOTTOM_TAB_NAVIGATOR}
                component={BottomTabNavigator}
            />
            ...
    </Stack.Navigator>
</NavigationContainer>

function BottomTabNavigator() {
    return (
        <BottomTab.Navigator>
            <BottomTab.Screen
                name={TabNavigatorRoute.SOME_STACK}
                component={SomeStack}
                listeners={{tabPress: e => {

                    // TODO: Reset stack in current tab (unsure how to do this)

                }}}
            />
            ...
        </BottomTab.Navigator>
    )
}

В TODO (во фрагменте кода), вероятно, должно быть сделано следующее:

  • Получить навигационную ссылку из приложения NavigationContainer
  • Проверить, фокусируется ли выбранная нижняя вкладка (для определения двойного нажатия)
    • e.preventDefault
    • сброс SomeStack ( не знаете, как получить навигационный объект в стеке внутри BottomTabNavigator)

Кто-нибудь еще смог сделать это? Ценю все ответы :) 1023 *

1 Ответ

0 голосов
/ 24 апреля 2020

Окей, в основном у вас есть 2 варианта для управления этим, во-первых, это проверка состояния навигации, но, как я выяснил, он работает только на устройстве IOS, android ничего не делает.

Этот фрагмент кода перемещается на первый экран из этого стека-навигатора 

<Tab.Screen name={`DeviceNavigatorTab`} component={DeviceNavigator} options={{
            tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_home-menu.png')} style={{width: 26, height: 26, tintColor}}/>,
        }} listeners={({ navigation, route }) => ({
            tabPress: e => {
                if (route.state && route.state.routeNames.length > 0) {
                    navigation.navigate('Device')
                }
            },
        })} />

Другое решение, и даже лучше, работает на android и IOS операционных системах

DeviceNavigatorTab this является экранным именем навигатора вкладок, {screen: 'Device'} - это первое экранное имя стека в навигаторе субстека, надеюсь, это поможет 

<Tab.Screen name={`DeviceNavigatorTab`} component={DeviceNavigator} options={{
            tabBarIcon: ({tintColor}) => <Image source={require('../../images/feather_home-menu.png')} style={{width: 26, height: 26, tintColor}}/>,
        }} listeners={({ navigation }) => ({
            tabPress: e => {
                navigation.navigate('DeviceNavigatorTab', { screen: 'Device' });
            },
        })} />

Это на самом деле не сброс настроек навигаторов, это просто на указанный экран внутри этой вкладки навигатора.

...