看名字我们就知道这个组件仅限 Android 平台能用。Android 中的 DrawerLayout 就是一个抽屉导航组件,所以这个组件的功能当然也是一样的。
DrawerLayoutAndroid 是通过 renderNavigationView 方法渲染的,并且它的直接子视图是放置内容的主视图。我们的这个抽屉导航视图一开始是看不见的,就像抽屉一样,你不拉开抽屉你看不到东西,所以导航视图可以从drawerPosition指定的窗口侧面拖拽出来,并且抽屉的宽度可以使用drawerWidth属性来指定。
还是老样子,看代码前,我们先看看效果图,只有看直观的效果图才能够引起你们的注意,引起你们的兴趣。那就一起来看看吧。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
DrawerLayoutAndroid,
TouchableOpacity,
Image,
View
} from 'react-native';
export default class DrawerLayoutDemo extends Component {
render() {
var navigationView = (
<View style={styles.container}>
<View style={styles.nav_top_view}>
<Image
style={{width: 50, height: 50}}
source={require('./img/head.jpg')}
/>
<Text
style={{marginTop:10,fontSize:16,color:'white'}}>非著名程序员</Text>
</View>
<TouchableOpacity
onPress={this.close}
>
<View style={styles.nav_item_view}>
<Image
style={{width: 20, height: 20}}
source={require('./img/nav_icon_home.png')}
/>
<Text
style={{fontSize:14,color:'grey',marginLeft:10}}>首页</Text>
</View>
</TouchableOpacity>
<View style={styles.nav_item_view}>
<Image
style={{width: 20, height: 20}}
source={require('./img/nav_icon_gift.png')}
/>
<Text
style={{fontSize:14,color:'grey',marginLeft:10}}>礼物</Text>
</View>
<View style={styles.nav_item_view}>
<Image
style={{width: 20, height: 20}}
source={require('./img/nav_icon_settings.png')}
/>
<Text
style={{fontSize:14,color:'grey',marginLeft:10}}>设置</Text>
</View>
</View>
);
return (
<DrawerLayoutAndroid
ref={(drawer) => { this.drawer = drawer; }}
drawerWidth={260}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={styles.container}>
<View style={styles.title_view}>
<TouchableOpacity
onPress={this.open}
>
<Image
style={{width: 30, height: 30}}
source={require('./img/menu_icon.png')}
/>
</TouchableOpacity>
<Text style={styles.title_text}>
非著名程序员
</Text>
<Text style={styles.title_text}>
更多
</Text>
</View>
</View>
</DrawerLayoutAndroid>
);
}
open=()=>{
this.drawer.openDrawer();
}
close=()=>{
this.drawer.closeDrawer();
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#FFFFFF',
},
nav_top_view:{
flexDirection:'column',
height:150,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
nav_item_view:{
flexDirection:'row',
height:50,
paddingLeft:30,
paddingTop:6,
paddingBottom:6,
alignItems: 'center',
backgroundColor:'#FFFFFF',
},
title_view:{
flexDirection:'row',
height:50,
paddingLeft:15,
paddingRight:15,
justifyContent: 'space-between',
alignItems: 'center',
backgroundColor:'#27b5ee',
},
title_text:{
color:'white',
fontSize:18,
textAlign:'center'
},
});
AppRegistry.registerComponent('DrawerLayoutDemo', () => DrawerLayoutDemo);