原生开发中,自定义视图可谓是屡见不鲜的事情,往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的观点。关于自定义视图的内容网上已经有很多的博文,本篇博客要和大家分享如何反应在本机中自定义组件实现抽屉菜单控件效果。分享功能在应用程序中的重要性想必是不言而喻的,那么RN中如何实现这种效果呢?
反应本机系统库中只提供了IOS的实现,即ActionSheetIOS。该控件的显示方式有两种实现:
(1)showActionSheetWithOptions
(2)showShareActionSheetWithOptions
第一种是在iOS设备上显示一个ActionSheet弹出框。第二种实现是在iOS设备上显示一个分享弹出框。借用官方的图片说明如下:
出口的默认类AndroidActionSheet扩展组件
<强> 2,自定义属性
//1 .声明所需要的属性
静态proptype={
标题:React.PropTypes。字符串,//标题
内容:React.PropTypes。对象,//内容
显示:React.PropTypes。函数,//显示
隐藏:React.PropTypes。//隐函数,藏
}
构造函数(道具){
超级(道具);
这一点。translateY=150;
这一点。状态={
可见:假的,
sheetAnim:新Animated.Value (this.translateY)
}
这一点。取消=this.cancel.bind(这个);
}
<强> 3,实现基本布局
/* *
*模态为最外层,滚动视图为内容层
*/呈现(){
const{可见,sheetAnim}=this.state;
回报(
& lt;模态
可见={可见}
透明={真}
animationType="没有">/* *
*标题
*/_renderTitle () {
const{标题、titleStyle}=this.props;
如果标题(!){
返回null
}//确定传入的是不是一个元素反应,防止渲染的时候出的错
如果(React.isValidElement(标题)){
回报(
& lt;视图风格={styles.title}在{标题}& lt;/View>
）
}
回报(
& lt;文本样式={(styles.titleText titleStyle]}在{标题}& lt;/Text>
）
}/* *
*内容布的局
*/_renderContainer () {
const{内容}=this.props;
回报(
& lt;视图风格={styles.container}比;
{内容}
& lt;/View>
）
}
当我们需要点击模态,进行关闭时,还需要处理关闭操作,模态并没有为我们提供外部关闭处理,所以需要我们单独实现,从布局代码中我们看到TouchableOpacity作为遮罩层,并添加了单机事件,调用取消来处理:
/* *
*控制模态点击关闭,Android返回键关闭
*/取消(){
this.hide ();
}
<强> 4,自定义方法,对外调用
在外部我们需要控制控件的显示和隐藏,所以需要对外公开显示,关闭的方法:
/* *
*显示
*/显示(){
这一点。设置状态({可见:真})
Animated.timing (this.state。sheetAnim, {
toValue: 0,
持续时间:250
}) .start ();
}
/* *
*隐藏
*/隐藏(){
这一点。设置状态({可见:假})
Animated.timing (this.state。sheetAnim, {
toValue: this.translateY,
持续时间:150
}) .start ();
}
5,使用
& lt; ActionSheet
ref='单'
title=胺窒怼?
内容={this._renderContent ()}/比;
