Question

我想在用户登录我的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 />
  }

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

Answer 1

你不能……至少这并不容易。您需要自己创建一个自定义的contentcomponent并实现导航。 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'})

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

1 个答案: