javascript - 退出抽屉内的子堆栈导航器时,如何使用 react-navigation 转到 initialRoute?
问题描述
我用 react-native、expo 和 react-navigation 构建了一个应用程序。我有一个主抽屉导航器,其中有 2 个其他堆栈导航器。一个堆栈导航器有 2 页;Products
和产品。当我点击页面中的一个产品时Products
,它会进入Product
页面。Ben 如果我单击抽屉导航器中的另一个链接,我希望产品页面的堆栈导航器在离开堆栈导航器时返回到它的初始路由。
当我退出堆栈导航器时,我尝试设置初始状态,当我单击抽屉导航器中的导航器链接时,它会呈现初始状态,但是当我在子页面中并退出导航器时它不起作用。当我在抽屉中再次单击时,它没有Products
导航到Products
页面,而是停留在Product
.
我可以在我的抽屉导航器中创建静态链接并使用this.props.navigation.navigate
总是去this.props.navigation.navigate('Products')
,但这将是我想要的最后一件事。我真的很喜欢我的抽屉导航器与我传递给它的东西保持动态。
this.props.navigation.navigate
当生命周期继续时,我尝试过componentWillUnmount
,但没有奏效。
我怎样才能做到这一点?
谢谢您的帮助!
解决方案
是的,完全可以使用 react-navigation 重置堆栈,对此有特定的操作。
这是抽屉位于选项卡导航中的示例。
首先我们在 中定义我们的抽屉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 - how to share link from my app to signal, bottom, email web and app?
- javascript - How do I add new field in existing JSON
- java - WSO2 IdentityServer 5.11 and WSO2 API Management 3.2.0 integration have DB script issue
- c++ - Rvalue reference overloading && operator
- r - Merge two tables and aggregate
- r - Error in seas(., x11 = "") : no output has been generated (R seasonal library isn't working fine)
- python - How to filter only record details which have max date
- windows - 什么会导致错误代码 32 后跟错误代码 2?
- django - Django model.py 多对多错误查询冲突
- javascript - 这段代码可以重构为更短的代码吗?