DrawerLayoutAndroid如何通过点击事件打开

最新推荐文章于 2022-09-20 16:46:16 发布

ZX10103326

最新推荐文章于 2022-09-20 16:46:16 发布

阅读量798

点赞数

分类专栏： react native 文章标签：移动开发 javascript ViewUI

本文链接：https://blog.csdn.net/ZX10103326/article/details/84767895

版权

react native 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

按照已知的文档的示例走发现，"抽屉"只能通过左右滑动打开,那么如何通过点击事件打开"抽屉呢"，这里需要用到ref，ref属性的介绍：https://facebook.github.io/react/docs/more-about-refs-zh-CN.html

'use strict';
import React, {
	AppRegistry,
	View,
	Component,
	Text,
	DrawerLayoutAndroid,
	Alert,
	StyleSheet,
	Image,
	ToolbarAndroid,
	ScrollView,
	PixelRatio,
} from 'react-native';

class App extends Component {
	
	constructor() {
		super();
		this.state = {
			
		}
	}
	
	showDrawer() {
		return(
			<View style={styles.center}>
				<Text style={styles.center_title}>我是导航栏功能标题</Text>
				<Text style={styles.center_item}>1、功能1</Text>
				<Text style={styles.center_item}>2、功能2</Text>
			</View>
		);
	}
	
	printProps() {
		console.log(this.props.title);
	}
	
	render() {
		var toolbarActions =[
			  {title: 'Create', icon:require('./images/kb-logo.png'), show: 'always'},
			  {title: 'Filter'},
			  {title: 'Settings', icon:require('./images/kb-logo.png'), show: 'always'},
			];
		return(
				
				<DrawerLayoutAndroid
					ref={(drawer) => { this.drawer = drawer; }}
					drawerWidth={200}
					drawerPosition={DrawerLayoutAndroid.positions.Left}
					renderNavigationView={this.showDrawer}>
				<View style={styles.flex}>
					<ToolbarAndroid 
								actions={toolbarActions}
		            			navIcon={require('./images/kb-logo.png')}
					            style={styles.toolbar}
					            subtitle="副标题"
					            title="主标题"
					            onIconClicked={() => this.drawer.openDrawer()}
					>
					</ToolbarAndroid>
					<ScrollView style={styles.flex}>
						<Text style={styles.index_title}>我是主布局内容</Text>
						<Image source={require('./images/6.jpg')} style={styles._img}/>
						<Image source={require('./images/7.jpg')} style={styles._img}/>
						<Image source={require('./images/8.jpg')} style={styles._img}/>
						<Image source={require('./images/9.jpg')} style={styles._img}/>
					</ScrollView>
				</View>
				</DrawerLayoutAndroid>
		);
	}
	
}

const styles = StyleSheet.create({
	
	flex: {
		flex: 1,
	},
	
	_img: {
		width: 699/PixelRatio.get(),
		height: 723/PixelRatio.get(),
		borderWidth: 1,
		borderColor: 'tan',
		margin:5,
	},
	
	toolbar: {
    	backgroundColor: '#e9eaed',
    	height: 56,
  	},
	center: {
		flex: 1,
		backgroundColor: 'green',
	},
	
	center_title: {
		margin: 10,
		color: '#fff',
		textAlign: 'center',
		fontSize: 15,
	},
	
	center_item: {
		marginTop: 10,
		marginLeft: 20,
		color: '#fff',
		textAlign: 'left',
		fontSize: 15,
	},
	
	index: {
		flex: 1,
		alignItems: 'center',
	},
	
	index_title: {
		margin: 10,
		fontSize: 15,
		textAlign: 'right',
	}
	
	
});

AppRegistry.registerComponent('learn', () => App);