[英]React native nested navigation - go back to initial route of stack navigator when the parent drawer route is clicked
I am using the following navigation setup in my react native project. 我在我的本机项目中使用以下导航设置。 Here I am using drawer navigation and stack navigation.
在这里,我正在使用抽屉式导航和堆栈导航。
import MainScreen from '../components/MainScreen';
import SettingsScreen from '../components/SettingsScreen';
import FriendsListScreen from '../components/FriendsListScreen';
import FriendProfileScreen from '../components/FriendProfileScreen';
// stack navigator - 1
const MainScreenStack = createStackNavigator(
{
MainScreen: MainScreen,
FriendsListScreen: FriendsListScreen,
FriendProfileScreen: FriendProfileScreen,
},
{
initialRouteName: 'MainScreen',
navigationOptions: {
drawerLabel: "Home"
},
}
);
// stack navigator - 2
const SettingsScreenStack = createStackNavigator(
{
SettingsScreen: SettingsScreen
},
{
navigationOptions: {
drawerLabel: "Settings"
},
}
);
// drawer navigation (stack navigator 1 + 2)
const AppNavigator = DrawerNavigator({
MainScreen: MainScreenStack,
SettingsScreen: SettingsScreenStack
});
const AppContainer = createAppContainer(AppNavigator)
Scenario: 场景:
Mock-up: 小样:
Is there a way to navigate back to the MainScreen when I am clicking "Home" link from the drawer? 当我从抽屉中单击“主页”链接时,是否可以导航回主屏幕?
I got a workaround for this by creating a custom drawer content as below: 通过创建如下的自定义抽屉内容,我得到了解决方法:
import {DrawerItems, SafeAreaView, createStackNavigator, createDrawerNavigator, createAppContainer} from "react-navigation";
const DrawerContent = (props) => (
<ScrollView>
<SafeAreaView forceInset={{top: 'always', horizontal: 'never'}}>
<DrawerItems {...props} onItemPress={ ({route, focused}) => {
if (route.key === "MainScreen") {
if (route.routes.length === 1) {
props.navigation.closeDrawer();
} else {
props.navigation.navigate(route.routes[0].routeName);
}
} else {
props.onItemPress({route, focused});
}
}} />
</SafeAreaView>
</ScrollView>
);
const AppNavigator = DrawerNavigator({
MainScreen: MainScreenStack,
SettingsScreen: SettingsScreenStack
}, {contentComponent: DrawerContent});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.