React-navigation之DrawerNavigation

最新推荐文章于 2025-06-10 12:01:49 发布

Lu'Blog

最新推荐文章于 2025-06-10 12:01:49 发布

阅读量9.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ReactNative 文章标签： DrawerNavigation

本文链接：https://blog.youkuaiyun.com/lu1024188315/article/details/73608616

ReactNative 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何使用 React Navigation 实现抽屉导航功能，包括配置抽屉宽度、位置等属性，自定义抽屉组件及样式，以及如何通过代码控制抽屉的打开与关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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