react-native侧边栏抽屉滑出

1.下载相关依赖包 只有支持IOS

1.yarn add react-native-navigation

2.react-native link

2.使用react-navigation:其中包含：
1、导航栏分类
createStackNavigator: 类似于普通的Navigator，实现不同的页面进行跳转
createTabNavigator: 相当于里面的TabBarController，屏幕上方的标签栏，不同的tabs互相切换。
createDrawerNavigator: 抽屉效果，侧边滑出
3.起步：

yarn add react-navigation
react-native link react-navigation

3.1 配置createStackNavigator

const PersonInfoStack = createStackNavigator({
  MyInfoIndex: {
    screen: MyInfoScreen,
    navigationOptions: {
      // header: null
      title: '个人',
      headerLeft: <View />,
      // headerTitle: <Text style={{ flex: 1, textAlign: 'center' }}>自定义Header</Text>,
      headerRight: <View />,
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center',
      },
      headerTintColor: '#fff',
      headerStyle: {
        backgroundColor:'#4487d6'
      },
    }
  }
});

3.2配置createDrawerNavigator

export const AppStack = createDrawerNavigator({
  Tabs: {
    screen: TabNavigator,
    navigationOptions: {
      header: null
    }
  },
  VisitorHistory: {
    screen: VisitorHistoryScreen,
    navigationOptions: {
      header: null
    }
  },
  RecordVisitor: {
    screen: RecordVisitorScreen,
    navigationOptions: {
      header: null
    }
/*     navigationOptions: ({navigation}) =>{
      return ({
        title: '增加访客',
        headerLeft: function(){
          return (
            <TouchableOpacity activeOpacity={1} onPress={() =>navigation.goBack()}>
            <View style={{display:'flex',flexDirection: 'row',justifyContent: 'center',alignItem: 'center',paddingLeft: 15}}>
              <FontAwesome name={'angle-left'} size={30} color={'#fff'} />
              <Text style={{color:'#fff',fontSize: 18,paddingTop: 4,paddingLeft: 4}}>返回</Text>
            </View>
            </TouchableOpacity>
          )
        },
        headerRight: <View />,
        headerTitleStyle: {
          flex: 1,
          textAlign: 'center',
        },
        headerTintColor: '#fff',
        headerStyle: platformContainerStyles
      })
    } */
    /* navigationOptions: {
      title: '增加访客',
      headerRight: <View />
    } */
  },
 /* AddVisitor: {
    screen: AddVisitorScreen,
    navigationOptions: {
      header: null
    }
    /!* navigationOptions: ({navigation}) =>{
      return ({
        title: '信息录入',
        headerRight: <View />,
        headerLeft: function(){
          return (
            <TouchableOpacity activeOpacity={1} onPress={() =>navigation.goBack()}>
            <View style={{display:'flex',flexDirection: 'row',justifyContent: 'center',alignItem: 'center',paddingLeft: 15}}>
              <FontAwesome name={'angle-left'} size={30} color={'#fff'} />
              <Text style={{color:'#fff',fontSize: 18,paddingTop: 4,paddingLeft: 4}}>返回</Text>
            </View>
            </TouchableOpacity>
          )
        },
        headerTitleStyle: {
          flex: 1,
          textAlign: 'center',
        },
        headerTintColor: '#fff',
        headerStyle: platformContainerStyles
      })
    } *!/
  },*/
  EditPeople: {
    screen: EditPeopleScreen,
    navigationOptions: {
      header: null
    }
  },
  ModifyPwd: {
    screen: ModifyPwdScreen,
    navigationOptions: {
      title: '修改密码',
      headerRight: <View />
    }
  },
  ModifyPwdSuccess: {
    screen: ModifyPwdSuccessScreen,
    navigationOptions: {
      title: '修改密码',
      headerRight: <View />
    }
  },
  Test: {
    screen: TestScreen,
    navigationOptions: {
      header: null,
      // title: '测试页面',
      // headerRight: <View />
    }
  },

},
  {
    animationEnabled:true,
    initialRouteName: 'Tabs',
    swipeEnabled: true,
    lazy: false,
    drawerWidth:Dimensions.get('window').width *0.9, // 抽屉宽
    drawerPosition: 'right', // 抽屉在左边还是右边
    contentComponent: AddVisitorScreen ,  // 自定义抽屉组件
  },

);

export const DrawerNav = createDrawerNavigator({
  AppStackPage1: { screen:AddVisitorScreen }
});