React-navigation之DrawerNavigation

1 API

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

2 DrawerNavigatorConfig

• drawerWidth 抽屉的宽度
• drawerPosition 抽屉的位置 值有left 、right 默认是left
• contentComponent 用来自定义抽屉的组件，默认的组件是DrawerView 但DrawerView是不能滑动的
• contentOptions  配置内容

3 contentOptions

• initialRouteName 默认页面组件
• activeTintColor 选中文字颜色
• activeBackgroundColor 选中背景颜色
• inactiveTintColor未选中文字颜色
• inactiveBackgroundColor未选中背景颜色
• style样式
• labelStyle 抽屉标签样式
• onItemPress 每次调用按钮Item时调用该方法
• drawerLabel 抽屉标注，可以是元素 或一个函数这个函数返回一个元素
• drawerIcon 抽屉图标 可以是元素 或一个函数这个函数返回一个元素

4 打开或关闭抽屉

this.props.navigation.navigate('DrawerOpen'); // open drawer
this.props.navigation.navigate('DrawerClose'); // close drawer

5 例

contentOptions使用：

const MyFirstProject = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications: {
         screen: MyNotificationsScreen,
    },
},{
    drawerWidth: 200, // 抽屉宽
    drawerPosition: 'left', // 抽屉在左边还是右边
    // contentComponent: CustomDrawerContentComponent,  // 自定义抽屉组件
    contentOptions: {
      initialRouteName: 'Home', // 默认页面组件
      activeItemKey : 'Notifications',
      labelStyle : {//标签样式
           // color : 'red',
           height : 30,
      },
      activeTintColor: 'white',  // 选中文字颜色
      activeBackgroundColor: '#ff8500', // 选中背景颜色
      inactiveTintColor: '#666',  // 未选中文字颜色
      inactiveBackgroundColor: '#fff', // 未选中背景颜色
      style: {  // 样式
         marginVertical: 0, 
      },
      //没有作用
      onItemPress : (route) => {
      	 console.log('-------->' + JSON.stringify(route))
      },
      
   },

   contentComponent: props => {
        console.log('contentComponent');
        console.log(props);
        return (
            <ScrollView>
                <View>
                    <View style={{paddingVertical: 20, paddingHorizontal: 15, backgroundColor:'#000'}}>
                        <Text style={{color:'#FFF'}}>ser Name</Text>
                    </View>
                    <DrawerItems {...props} />
                </View>
            </ScrollView>
        )
    },
});

完整代码：

import React from 'react';
import {
   AppRegistry,
   Text,
   View,
   StyleSheet,
   Image,
   Button,
   ScrollView,
}  from 'react-native';

import { 
	     DrawerNavigator ,
         DrawerItems ,
         } from 'react-navigation';

class MyHomeScreen extends React.Component {

  static navigationOptions = {
  	//{ focused: boolean, tintColor: string }
    drawerLabel: 'Home',
    //{ focused: boolean, tintColor: string }
    drawerIcon: ({ tintColor }) => (
      <Image
        source={require('./img/icon_1.png')}
        style={[styles.icon, {tintColor: tintColor}]}
      />
    ),
  };
  render() {
    return (
      <Button
        onPress={() => this.props.navigation.navigate('DrawerOpen')}
        title=" MyHomeScreen ----> open drawer"
      />
    );
  }
}


const MyNotificationsScreen = ({navigation}) => (
    <View>
        <Button
          onPress={() => navigation.navigate('DrawerOpen')}
          title="MyNotificationsScreen ---> open drawer  "
        />
        <Text></Text>
	</View>
);


MyNotificationsScreen.navigationOptions = {
   drawerLabel: 'Notifications',
    drawerIcon: () => (
    	<View>
            <Image
                source={require('./img/icon_1.png')}
                style={styles.icon}
            />
    	</View>
      
    ),
};


const MyFirstProject = DrawerNavigator({
    Home: {
        screen: MyHomeScreen,
    },
    Notifications: {
         screen: MyNotificationsScreen,
    },
},{
    drawerWidth: 200, // 抽屉宽
    drawerPosition: 'left', // 抽屉在左边还是右边
    // contentComponent: CustomDrawerContentComponent,  // 自定义抽屉组件
    contentOptions: {
      initialRouteName: 'Home', // 默认页面组件
      activeItemKey : 'Notifications',
      labelStyle : {//标签样式
           // color : 'red',
           height : 30,
      },
      activeTintColor: 'white',  // 选中文字颜色
      activeBackgroundColor: '#ff8500', // 选中背景颜色
      inactiveTintColor: '#666',  // 未选中文字颜色
      inactiveBackgroundColor: '#fff', // 未选中背景颜色
      style: {  // 样式
         marginVertical: 0, 
      },
      //没有作用
      onItemPress : (route) => {
      	 console.log('-------->' + JSON.stringify(route))
      },
      
   },

   contentComponent: props => {
        console.log('contentComponent');
        console.log(props);
        return (
            <ScrollView>
                <View>
                    <View style={{paddingVertical: 20, paddingHorizontal: 15, backgroundColor:'#000'}}>
                        <Text style={{color:'#FFF'}}>ser Name</Text>
                    </View>
                    <DrawerItems {...props} />
                </View>
            </ScrollView>
        )
    },
});

const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});

AppRegistry.registerComponent('MyFirstProject' , () => MyFirstProject );

效果图：

参考：

官网

资料1

资料2