如何设置抽屉组件中未显示的初始屏幕？答案

【问题标题】：How to set an initial screen that is not shown in drawer component?如何设置抽屉组件中未显示的初始屏幕？
【发布时间】：2019-01-21 11:39:57
【问题描述】：

我想在用户登录到我的 react 本机应用程序时显示初始屏幕。但我不想在抽屉组件上显示屏幕，因为我已将抽屉组件用于来自 react 导航的其他屏幕。当用户从抽屉组件进入不同的屏幕时，我想让他们在按下后退按钮时回到上一个初始屏幕。

const AppStackNavigator = createStackNavigator({
  Map: {
    screen: Maps,
    navigationOptions: () => ({
      header: null
    })
  },
  UpdateProfile: {
    screen: UpdateProfileScreen,
    navigationOptions: () => ({
      header: null
    })
  },
  SearchDetails: {
    screen: SearchDetails,
    navigationOptions: () => ({
      header: null
    })
  },
})

const AppDrawerNavigator = createDrawerNavigator({
  Home: {
    screen : AppStackNavigator,
    navigationOptions: () => ({
      title: `Map`,
      drawerIcon: ({tintColor}) => (
        <Image source={require('./assets/img/s_logo.png')} style={{height: 24, width: 24}}/>
      )
    })
  },
  Search: {
    screen: SearchScreen,
    navigationOptions: () => ({
      title: `Search by`
    })
  },
  Vendor: {
    screen: HomeScreen,
    navigationOptions: () => ({
      title: `Vendor List`,
    })
  },
  Notifications: {
    screen: NotificationScreen
  },
  Events: EventsScreen,
  Venue : {
    screen: VenueAvailabilityScreen,
    navigationOptions: () => ({
      title: `Venue Availability`,
    })
  },
  Settings: {
    screen: SettingsScreen
  }
}, {
  drawerPosition: 'left',
  contentComponent: customDrawerContentComponent,
  drawerOpenRoute: 'DrawerOpen',
  drawerCloseRoure: 'DrawerClose',
  drawerToggleRoute: 'DrawerToggle',
  drawerWidth: 320,
  contentOptions: {
    activeTintColor: '#fff',
    inactiveTintColor: '#030303',
    activeBackgroundColor: '#B90066',
    inactiveBackgroundColor: '#fff',
    itemsContainerStyle: {
      marginHorizontal: 10
    },
    itemStyle: {
      height: 40,
      borderRadius: 60,
    },
    activeLabelStyle: {
      fontSize: 20, 
      fontWeight: 'normal'
    }
  }
  })

  const AuthStackNavigator = createStackNavigator({
    SplashScreen: { screen: SplashScreen },
    ModalScreen:{
      screen: ModalScreen
    },
    LocationNotification: {
      screen: LocationNotificationScreen,
      navigationOptions: () => ({
        header: null
      })
    },
    LoginScreen: { 
      screen : LoginScreen,
      navigationOptions: () => ({
        header: null
      })
    },
    SignUpScreen: {
      screen : SignUpScreen,
      navigationOptions: () => ({
        header: null
      })
    },
    SignUpStepTwo: {
      screen : SignUpStepTwo,
      navigationOptions: () => ({
        header: null
      })
    },
    ForgotPassword: {
      screen: ForgotPassword,
      navigationOptions: () => ({
        header: null
      })
    }
   
  })



const AppSwitchNavigator = createSwitchNavigator({
  AuthLoadingScreen: AuthLoadingScreen,
  Auth: AuthStackNavigator,
  App: {
    screen: AppDrawerNavigator
  }
})

const MyAppDrawer = createAppContainer(AppSwitchNavigator)

class App extends Component {
  render() {
    return <MyAppDrawer />
  }

我想将地图屏幕设置为初始屏幕，但不想在抽屉上显示。我怎么能那样做？

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

你不能……至少这并不容易。您需要自己创建一个自定义内容组件并实现导航。 Tutorial here。另一种方法是使您的 appdrawernavigator 成为具有初始屏幕的 stacknavigator 的子项

const AppSwitchNavigator = createSwitchNavigator({
  AuthLoadingScreen: AuthLoadingScreen,
  Auth: AuthStackNavigator,
  App: MainStackNavigator
})


    //the main stack


const MainStackNavigator= createStackNavigator({
  InitialScreen: {screen: InitialScreen},
  DrawerNav: {screen:AppDrawerNavigator}
},{headerMode: 'none'})

【讨论】：