react-native-ezsidemenu 侧滑菜单组件

react-native-ezsidemenu 侧滑菜单组件

1、组件描述：
react-native-ezsidemenu是基于react native的一款侧滑菜单组件，支持iOS和Android。详细使用方法参考地址：（1）react-native-ezsidemenu组件
2、组件使用：
（1）先安装react-native-ezsidemenu
$ npm install rreact-native-ezsidemenu --save
（2）导入react-native-ezsidemenu
import EZSideMenu from ‘react-native-ezsidemenu’;
（3）使用EZSideMenu

<EZSideMenu
    type={EZSideMenu.type.Overlay}//类型有三种，default type、overlay type、slide type三种
    menu={this.menu()} //侧滑菜单组件内容
    ref="menu"
    direction={'Right'}//侧滑方向，Left,Right
    width={width * 0.8}//侧滑菜单宽度
    isOpen={this.state.isOpen}//设置关闭状态，通过点击事件改变开启关闭状态
    panGestureEnabled={false}>//菜单是否支持手势滑动
    <TouchableOpacity style={styles.searchTabRight} activeOpacity={1} onPress={this.toggle}>
    	<Text style={styles.tabText}>筛选</Text>
     	<Image style={styles.selectIcon} source={require('../assets/images/search/shaixuan.png')}/>
    </TouchableOpacity>
</EZSideMenu>//EZSideMenu标签里面写本页面要展示的内容
//this.toggle方法，点击时展开或关闭侧滑菜单事件
this.toggle = this._toggle.bind(this);
_toggle() {
	if (this.refs.menu) {
		if (this.state.isOpen) {
		 this.refs.menu.close();
		} else {
		 this.refs.menu.open()
		}
	}
}
//this.menu()方法里面写侧滑菜单里要展示的内容
menu() {
	const menu = (
	<Animated.View style={{ flex: 1, backgroundColor: '#fff'}}>
		 <TextInput
		    style={[GlobalStyles.sld_global_font]}
		    underlineColorAndroid={'transparent'}
		    autoCapitalize='none'
		    autoFocus={false}
		    returnKeyType='search'
		    keyboardType='numeric'
		    enablesReturnKeyAutomatically={true}
		    placeholder='最低价'
		    placeholderTextColor="#aaaaaa"
		    onChangeText={(text) => {
		        this.setState({ minPrice: text });
		    }}
		>
		</TextInput>
	</Animated.View>
	);
	return menu
}

3、react-native-ezsidemenu组件属性及方法：

4、最终效果图：