React-navigation之DrawerNavigation

来源：互联网发布：sqlserver 去掉重复行编辑：程序博客网时间：2024/05/21 14:08

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 drawerthis.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

阅读全文

0 0