React Native (三)

创建抽屉导航

const DrawerNavigator = createDrawerNavigator({
  Page1: {
    screen: Page1,
    navigationOptions: {
      drawerLabel: "我的",
      drawerIcon: ({tintColor}) => (
        
      )
    }
  },
  Page2: {
    screen: Page2,
    navigationOptions: {
      drawerLabel: "账户",
      drawerIcon: ({tintColor}) => (
        
      )
    }
  }
}, {
  initialRouteName: "Page1",
  contentOptions: {activeTintColor: '#abcdef'},
  contentComponent: (props) => (
    
      
        
      
    
  )
})

这里使用了另外一个图标包，按照之前的方法引入即可。使用方法也没有改变。
希望侧边栏是可以滑动的，所以将里面的内容放在了一个ScrollView里面。但是考虑到全面屏和一些其他屏幕的兼容性，把真正的内容放在ScrollView里面的SafeAreaView安全区域内，这样不会导致内容不可见或者被隐藏掉一部分。

创建SwitchNavigator

一次只显示一个页面。 默认情况下，它不处理返回操作，并在你切换时将路由重置为默认状态。
对于一个react-native APP来说，SwitchNavigator是必经之路。首先登录就需要它，用户没有成功登录，不可能让他就看到app里面的东西。
创建其实很简单：

export default createSwitchNavigator({
 AuthPage: AuthStack,
 AppPage: AppNavigator
}, {
 initialRouteName: "AuthPage"
})

顾名思义，AuthPage就是登录页，AppPage就是登录成功之后的APP页面。
我们将这个作为默认导出， 然后在index.js里面直接引用它

import {AppRegistry} from 'react-native'
import {createAppContainer} from "react-navigation";
import App from './navigator/navigator'
import {name as appName} from './app.json'

AppRegistry.registerComponent(appName, () => createAppContainer(App))

刷新页面：

import React, { Component } from 'react'
import {View, Text, StyleSheet, Button} from 'react-native'

export default class Login extends Component{
  render(){
    const {navigation} = this.props
    return (
      
        Login!
         navigation.navigate("AppPage")} />
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});

登录页面就是点击登录之后跳转路由为AppNavigator所在的路由AppPage.