1. 安裝
yarn add react-native-drawer -S
或
npm install react-native-drawer -S
2. 使用
2.1 Home組件
import React, {Component } from 'react';
import {
StyleSheet,
ScrollView,
TouchableOpacity,
} from 'react-native';
import {
Text
} from 'native-base';
import Drawer from 'react-native-drawer'
// Drawer組件
import ControlPanel from '../component/ControlPanel';
class Home extends Component{
constructor(props) {
super(props);
this.state = {
drawerOpen: false,
drawerDisabled: false,
};
}
closeDrawer = () => {
this._drawer.close()
};
openDrawer = () => {
this._drawer.open()
};
render() {
return (
<Drawer
ref={(ref) => this._drawer = ref}
// type: 一共是3種(displace,overlay,static), 用static就好啦朋鞍,static讓人感覺(jué)更舒適一些
type="static"
// Drawer 展開區(qū)域組件
content={
<ControlPanel closeDrawer={this.closeDrawer} />
}
// 響應(yīng)區(qū)域雙擊可以打開抽屜
acceptDoubleTap
// styles 和 tweenHandler是設(shè)置向左拉后主內(nèi)容區(qū)的顏色屿讽,相當(dāng)于給主內(nèi)容區(qū)加了一個(gè)遮罩
styles={{
mainOverlay: {
backgroundColor: 'black',
opacity: 0,
},
}}
tweenHandler={(ratio) => ({
mainOverlay: {
opacity: ratio / 2,
}
})}
// drawer打開后調(diào)用的函數(shù)
onOpen={() => {
this.setState({drawerOpen: true});
}}
// drawer關(guān)閉后調(diào)用的函數(shù)
onClose={() => {
this.setState({drawerOpen: false});
}}
captureGestures={false}
// 打開/關(guān)閉 Drawer所需要的時(shí)間
tweenDuration={100}
// 觸發(fā)抽屜打開/關(guān)閉必須經(jīng)過(guò)的屏幕寬度比例
panThreshold={0.08}
disabled={this.state.drawerDisabled}
// Drawer打開后有邊界距離屏幕右邊界的距離
openDrawerOffset={(viewport) => {
return 100;
}}
// 拉開抽屜的響應(yīng)區(qū)域
panOpenMask={0.2}
// 如果為true, 則嘗試僅處理水平滑動(dòng)
negotiatePan
>
{/*主內(nèi)容區(qū)*/}
<ScrollView style={styles.container}>
<Text>MAIN</Text>
</ScrollView>
</Drawer>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: '#7699dd',
padding: 20,
flex: 1,
},
});
export default Home;
2.2 Drawer組件 <ControlPanel/>
// 此組件可根據(jù)具體需求自定義
import React, {Component} from 'react'
import {
ScrollView,
StyleSheet,
Text,
TouchableOpacity,
View,
} from 'react-native'
export default class ControlPanel extends Component {
render() {
let {closeDrawer} = this.props
return (
<ScrollView style={styles.container}>
<View style={{marginTop: 40}}>
<Text style={styles.controlText}>Control Panel</Text>
<TouchableOpacity style={styles.button} onPress={closeDrawer}>
<Text>Close Drawer</Text>
</TouchableOpacity>
</View>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: '#d0d0d0',
},
controlText: {
color: 'white',
},
button: {
backgroundColor: 'white',
borderWidth: 1,
borderColor: 'black',
padding: 10,
}
})
2.3 結(jié)果
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者