React Native中,DrawerLayoutAndroid组件与Android原生开发中的DrawerLayout一样实现侧滑菜单的效果。通过手势左右滑动实现拉出与退出的操作,但是需要通过点击图标或者文字就能弹出侧滑菜单该怎么做呢?
这时就需要知道DrawerLayoutAndroid在展开和关闭时所调用的具体方法了,这个可以通过源码知道,点开DrawerLayoutAndroid.android.js的源码,发现展开侧滑菜单的方法是这样:
/**
* Opens the drawer.
*/
openDrawer: function() {
UIManager.dispatchViewManagerCommand(
this._getDrawerLayoutHandle(),
UIManager.AndroidDrawerLayout.Commands.openDrawer,
null
);
},
同样也有关闭时的closeDrawer方法。
所以,在自己的项目中,只需要拿到DrawerLayoutAndroid组件,直接或间接调用openDrawer方法即可实现展开。
那么具体的操作就是下面这样:
1–在DrawerLayoutAndroid中添加ref属性。
添加ref属性即可实现对组件的引用。这里需要获取到DrawerLayoutAndroid的引用来调用展开关闭的方法。关于ref属性不熟悉的看这里—对组件的引用(refs)。
(这里对DrawerLayoutAndroid的引用为drawer)
<DrawerLayoutAndroid
ref={(drawer) => {
this.drawer = drawer;
}}
......
2–定义展开关闭侧滑菜单的方法。
根据上面定义的DrawerLayoutAndroid的引用drawer,来调用源码中openDrawer和closeDrawer方法 。作为自己当前项目展开关闭侧滑菜单的方法。
//打开侧滑栏
onPenLeftDrawer() {
this.drawer.openDrawer();
}
closeLeftDrawer() {
this.drawer.closeDrawer();
}
3–onPress将点击与侧滑菜单的展开和关闭联系起来
定义用于点击展开的按钮TouchableHighlight,其中的onPress点击函数就是调用自己定义的侧滑菜单的展开方函数。于是,当TouchableHighlight被点击时,调用onPenLeftDrawer展开方法。使侧滑菜单展开。
<TouchableHighlight
underlayColor="rgb(210, 230, 255)"
activeOpacity={0.5}
style={styles.touchable}
onPress={() => this.onPenLeftDrawer()}
//onPress={this.onPenLeftDrawer.bind(this)}
>
<Text style={{fontSize: 16, justifyContent: 'center'}}>点击我弹出</Text>
</TouchableHighlight>
由于展开侧滑菜单之后,手势操作或者点击侧滑菜单之外的部分也能使其关闭,所以通过点击使其关闭意义并不大。但是实现方式与上面一样,在侧滑菜单的View中,添加点击控件,绑定closeLeftDrawer关闭方法,就可以用通过点击来关闭。
最终效果:
以上效果完整代码(项目名Test13):
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
DrawerLayoutAndroid,
TouchableHighlight,
} from 'react-native';
class Test13 extends Component {
//打开侧滑栏
onPenLeftDrawer() {
this.drawer.openDrawer();
}
closeLeftDrawer() {
this.drawer.closeDrawer();
}
render() {
var navigationView = (
<View style={{flex: 1, backgroundColor: 'white'}}>
<Text style={{margin: 10, color: '#333', fontSize: 15, textAlign: 'center'}}>侧滑菜单</Text>
<Text
style={{marginTop: 10, marginLeft: 20, color: '#666', fontSize: 15, textAlign: 'left'}}>账户设置</Text>
<Text
style={{marginTop: 10, marginLeft: 20, color: '#666', fontSize: 15, textAlign: 'left'}}>支付中心</Text>
<TouchableHighlight
underlayColor="rgb(210, 230, 255)"
activeOpacity={0.5}
style={[styles.touchable,{marginTop: 280}]}
onPress={this.closeLeftDrawer.bind(this)}
>
<Text style={{fontSize: 16, justifyContent: 'center'}}>点击关闭侧滑菜单</Text>
</TouchableHighlight>
</View>
);
return (
<DrawerLayoutAndroid
ref={(drawer) => {
this.drawer = drawer;
}}
drawerWidth={250}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() => navigationView}>
<View style={{flex: 1,}}>
<TouchableHighlight
underlayColor="rgb(210, 230, 255)"
activeOpacity={0.5}
style={styles.touchable}
onPress={() => this.onPenLeftDrawer()}
//onPress={this.onPenLeftDrawer.bind(this)}
>
<Text style={{fontSize: 16, justifyContent: 'center'}}>点击我弹出</Text>
</TouchableHighlight>
</View>
</DrawerLayoutAndroid>
);
}
}
const styles = StyleSheet.create({
button: {
backgroundColor: 'white',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#CDCDCD',
},
touchable: {
backgroundColor: '#fff',
padding: 15,
borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: '#CDCDCD',
}
});
AppRegistry.registerComponent('Test13', () => Test13);