如何设计抽屉式导航器Aith参考appstacknavigator

时间:2018-10-01 22:21:33

标签: react-native react-native-navigation

///这是我在appdrawer中使用标签导航的appstacknavigation

 import AuthLoadingScreen from './src/screens/AuthLoadingScreen'
 import WelcomeScreen from './src/screens/WelcomeScreen'
 import SignInScreen from './src/screens/SignInScreen' 
 import SignUpScreen from './src/screens/SignUpScreen'
 import HomeScreen from './src/screens/HomeScreen'
 import SettingsScreen from './src/screens/SettingsScreen'


const AuthStackNavigator = createStackNavigator({
  Welcome: WelcomeScreen,
  SignIn: SignInScreen,
  SignUp: SignUpScreen
})

const AppTabNavigator = createBottomTabNavigator({
  HomeScreen: {
    screen: HomeScreen,
    navigationOptions: {
      tabBarLabel: 'HOME',
      tabBarIcon: () => (
        <Icon name="ios-home-outline" size={24} />
      )
    }
  },
  Settings: {
    screen: SettingsScreen,
    navigationOptions: {
      tabBarLabel: 'SETTINGS',
      tabBarIcon: () => (
        <Icon name="ios-settings-outline" size={24} />
      )
    }

  }
})

const AppStackNavigator = createStackNavigator({
  AppTabNavigator: {
    screen: AppTabNavigator,
    navigationOptions: ({ navigation }) => ({
      header: null
    })
  }
})

//在抽屉中添加任何没有app stck组件的屏幕时,它会显示特定屏幕      const AppDrawerNavigator = createDrawerNavigator({      主页:AppStackNavigator      }) //我应该如何设计

 export default createSwitchNavigator({
 AuthLoading: AuthLoadingScreen,
 Auth: AuthStackNavigator,
 App: AppDrawerNavigator
 })

 const styles = StyleSheet.create({
 container: {
  flex: 1,
 alignItems: 'center',
 justifyContent: 'center'
 }

});

0 个答案:

没有答案