[React Native]DrawerNavigator 抽屉组件

1.首先可以参考官方例子:

https://reactnavigation.org/docs/en/drawer-based-navigation.html

这个是最简单的

 

这个是官方GitHub例子:

https://github.com/react-navigation/react-navigation/blob/master/examples/NavigationPlayground/js/Drawer.js

当然这个也是比较简单的,只是通过openDrawer()来启动

 

组件属性总结:

https://blog.csdn.net/u010418640/article/details/80737330

 

2.结合tab bar

如果结合tab bar则变复杂了很多,因为我点击drawer里面的item时要跳转到对应的tab上,就不能简单使用openDrawer()来启动了,而且简单drawer不会遮挡下面的tab bar.

 

好在发现了一个女程序员写的例子,解决了我这个问题:

先给出地址:https://readybytes.in/blog/how-to-integrate-tabs-navigation-drawer-navigation-and-stack-navigation-together-in-react-navigation-v2

gitLab:https://gitlab.com/readybytes/ReactNavigationExampleVersion2

 

3.我的代码分析:

export const DrawerStack = createDrawerNavigator({
    HOME: {
      screen: TabNavigator,
    },
},
{
    initialRouteName: 'HOME',
    contentComponent: DrawerScreen,
    contentOptions: {
      activeTintColor: '#e91e63',
    },
    style:{
        backgroundColor: '#dfe04d',
    },
});

 入口改为DrawerStack,里面装tabNavigation, tabNavigation里面再装StackNavigation

里面用到contentComponent: DrawerScreen,这里导入了DrawerScreen页面组件.也就是这个Drawer里面是一个自定义页面.还有调整背景在DrawerStack里面调,进入到DrawerScreen不能调整.

 

调用:

只需要在栈中的页面调用即可,openDrawer()后会使用DrawerScreen

 

<Button onPress={() => this.props.navigation.openDrawer()} title="Open drawer" />

 

 

我的DrawerScreen:先放效果图:

 

import React, {Component} from 'react';
import {NavigationActions} from 'react-navigation';
import PropTypes from 'prop-types';
import {ScrollView, Text, View, StyleSheet, Image, TouchableOpacity} from 'react-native';
import { DrawerActions } from 'react-navigation';
import styles from '../styles/index';

class DrawerScreen extends Component {
  navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
    this.props.navigation.dispatch(DrawerActions.closeDrawer())
  }

  _cancleDrawer=function() {
      this.props.navigation.closeDrawer()
  }

  render () {
    return (
      <View style={style.rootContainer}>

        <View style={style.head}>
          <Image source={require('../img/menu_header.png')} style={{resizeMode:'contain'}} />
        </View>

        <View style={style.head_bar}>
        <TouchableOpacity onPress={() =>this._cancleDrawer()}>
          <Image source={require('../img/menu_cancle.png')} />
        </TouchableOpacity>
        <Image source={require('../img/menu_inbox.png')} style={style.inboxStyle}/>
          <Text style={{marginTop:10, fontWeight:'bold'}}>INBOX</Text>
        </View>

        <ScrollView>
          <View>

          <TouchableOpacity onPress={this.navigateToScreen('Home')}>
            <View style={styles.menuItem}>
            <Image source={require('../img/menu_home.png')} style={style.listImage}/>
              <Text  style={style.textStyle}>
                Home
              </Text>
            </View>
            </TouchableOpacity>

          <TouchableOpacity onPress={this.navigateToScreen('Schedule')}>
            <View style={styles.menuItem}>
              <Image source={require('../img/menu_schedule.png')} style={style.listImage}/>
              <Text  style={style.textStyle}>
               SCHEDULE
              </Text>
            </View>
            </TouchableOpacity>

          <TouchableOpacity onPress={this.navigateToScreen('Booking')}>
            <View style={styles.menuItem}>
              <Image source={require('../img/menu_booking.png')} style={style.listImage}/>
              <Text  style={style.textStyle}>
              BOOKING
              </Text>
            </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={this.navigateToScreen('Member')}>
            <View style={styles.menuItem}>
              <Image source={require('../img/menu_member.png')} style={style.listImage}/>
              <Text  style={style.textStyle}>
              MEMBER
              </Text>
            </View>
            </TouchableOpacity>

            <TouchableOpacity onPress={this.navigateToScreen('SettingScreen')}>
            <View style={styles.menuItem}>
              <Image source={require('../img/menu_setting.png')} style={style.listImage}/>
              <Text onPress={this.navigateToScreen('SettingScreen')} style={style.textStyle}>
              SETTING
              </Text>
            </View>
            </TouchableOpacity>
            
          </View>
        </ScrollView>
      </View>
    );
  }
}

DrawerScreen.propTypes = {
  navigation: PropTypes.object
};

const style = StyleSheet.create({
  rootContainer:{
    flex: 1,
    flexDirection: 'column'
  },
  head:{
    marginTop: 30,
    alignItems: 'center',
    justifyContent: 'center'
  },
  head_bar:{
    flexDirection: 'row', 
    height:50
  },
  inboxStyle:{
    marginLeft: 120,
  },
  listStyle:{
    flex: 1,
    marginTop:10
  },
  textStyle:{
    marginTop:10,
    marginLeft: 10,
    fontWeight: 'bold',
    textAlign:'center',
  },
  listImage:{
    marginLeft:50
  }
})

export default DrawerScreen;

 几个要点:

一.核心实现跳转到相应的tab:

navigateToScreen = (route) => () => {
    const navigateAction = NavigationActions.navigate({
      routeName: route
    });
    this.props.navigation.dispatch(navigateAction);
    this.props.navigation.dispatch(DrawerActions.closeDrawer())
  }

 

二.onPress问题:

有两种:

如果没有返回,调用的是类,则要这样:

<TouchableOpacity onPress={this.navigateToScreen('Member')}>

第二种有返回的时候调用,一般调用的是function:

<TouchableOpacity onPress={() =>this._cancleDrawer()}>

 (_fooFunc()表示私有)

类写在() =>中会发现跳转不了.function写在onPress={this._cancleDrawer()}会looping错误或者其他异常.因为onPress在render中会被渲染,onPress={this._cancleDrawer()}这样写会直接执行this的内容.

 

三.style UI:

flexDirection: 'column'

这个可以控制控件排列.

注意同级控件如果有一个加了flex,其他即使没有加flex,也会按照比例排开,所以要注意,不是什么情况都加flex的.

 

可以写一个单独的style,其他页面import进去后,可以直接style.xxx使用,简单直接,也可以复用.