1.0.2 • Published 7 years ago
react-native-sf-drawer v1.0.2
react-native-sf-drawer
侧边栏
安装
npm install react-native-sf-drawer
Props
| parameter | type | required | description | default |
|---|---|---|---|---|
| drawerWidthRate | number | no | 侧边栏暂屏幕宽度的比例（0.0-1.0） | 0.7 |
| drawerHeight | number | no | 侧边栏高度 | null |
| drawerDirection | string | no | 侧边栏的方向（'left','right'） | 'left' |
| drawerTop | number | no | 侧边栏距离上方的高度 | 0 |
| backgroundColor | string | no | 背景颜色 | 'rgba(0,0,0,0.7)' |
| onOpen | func | no | 开始显示 | null |
| onClose | func | no | 开始关闭 | null |
Methods
| Methods | Params | Param Types | description | Example |
|---|---|---|---|---|
| show | null | null | 显示侧边栏 | |
| hide | null | null | 隐藏侧边栏 |
例子
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
Dimensions,
TouchableOpacity
} from 'react-native';
import SFDrawer from "react-native-sf-drawer"
var dw = Dimensions.get('window').width;
var dh = Dimensions.get('window').height;
export default class App extends Component {
click = () => {
this.refs.drawer.show()
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.click}>
<View style={{
width:dw,
height:150,
backgroundColor:'red'
}}></View>
</TouchableOpacity>
<SFDrawer
ref="drawer"
drawerDirection={'left'}
>
<View style={{
height:dh,
backgroundColor:'green'
}}></View>
</SFDrawer>
</View>
);
}
}