我使用下面的导航设置在我的反应本地项目。在这里我使用抽屉导航和堆栈导航。
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)
场景:
小样:
有没有一种方法来导航回到MainScreen当我点击从抽屉中“家”的链接?
我得到了解决类似的问题通过如下创建自定义的抽屉内容:
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});