gpt4 book ai didi

javascript - 退出抽屉内的子堆栈导航器时如何使用 react 导航转到 initialRoute?

转载 作者:行者123 更新时间:2023-11-29 22:53:19 25 4
gpt4 key购买 nike

我使用 react-native、expo 和 react-navigation 构建了一个应用程序。我有一个主抽屉导航器,其中有 2 个其他堆栈导航器。一个堆栈导航器有 2 个页面; 产品 和产品。当我在 Products 页面中单击一个产品时,它会进入 Product 页面。 Ben,如果我单击抽屉导航器中的另一个链接,我希望产品页面的堆栈导航器在离开堆栈导航器时返回到它的 initialRoute。

我尝试为退出堆栈导航器时设置 initialState,当我单击抽屉导航器中的导航器链接时它会呈现 initialState,但是当我在子页面中并退出时它不起作用航海家。当我再次单击抽屉中的 Products 时,它没有导航到 Products 页面,而是停留在 Product 上。

我可以在抽屉导航器中创建静态链接,并使用 this.props.navigation.navigate 始终转到 this.props.navigation.navigate('Products'),但这将是我最不想要的东西。我真的很希望我的抽屉导航器能够随着我传递给它的内容保持动态。

componentWillUnmount 生命周期继续时,我尝试了 this.props.navigation.navigate,但没有成功。

我该怎么做?

感谢您的帮助!

最佳答案

是的,完全可以用 react 导航重置堆栈,有一个 specific action为此。

这是抽屉位于标签导航中的示例。

首先我们在 MenuDrawer.js 中定义我们的抽屉,这里没有什么特别的:

import { createDrawerNavigator } from 'react-navigation';

import ProductStack from './ProductStack';
import OtherStack from './OtherStack';

const MenuDrawer = createDrawerNavigator({
Product: {
screen: ProductStack,
navigationOptions: {
drawerLabel: 'My products',
},
},
Other: {
screen: OtherStack,
navigationOptions: {
drawerLabel: 'Something else',
},
},
});


export default MenuDrawer;

最后我们定义了我们的标签导航,我们使用 tabBarOnPress 导航选项来监听任何抽屉打开并在需要时重置堆栈:

import { createBottomTabNavigator, StackActions, NavigationActions } from 'react-navigation';

import MenuDrawer from './MenuDrawer';

const BottomTabs = createBottomTabNavigator({
Menu: {
screen: MenuDrawer,
navigationOptions: {
title: 'Menu',
tabBarOnPress: ({ navigation }) => {
const notResetRoute = navigation.state.routes.find(x => x.index > 0); // Check for stack not positioned at the first screen
if (notResetRoute) {
const resetAction = StackActions.reset({ // We reset the stack (cf. documentation)
index: 0,
actions: [
NavigationActions.navigate({ routeName: notResetRoute.routes[0].routeName }),
],
});
navigation.dispatch(resetAction);
}
navigation.openDrawer(); // Finally we open the drawer
},
},
},
});


export default BottomTabs;

当用户点击相应的选项卡时,抽屉就会打开。显然,如果抽屉以不同方式打开,例如通过单击给定屏幕中的按钮,则可以进行相同的操作。重要的是同时重置堆栈。

关于javascript - 退出抽屉内的子堆栈导航器时如何使用 react 导航转到 initialRoute?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57063950/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com