React Native自定义控件底部抽屉菜单的示例

一、需求分析

原生开发中，自定义view可谓是屡见不鲜的事情，往往系统的控件总不能满足现实的需求。五花八门的产品设计需要我们做出不同的view。关于自定义view的内容网上已经有很多的博文，本篇博客要和大家分享如何在react native中自定义组件实现抽屉菜单控件效果。分享功能在app中的重要性想必是不言而喻的，那么rn中如何实现这种效果呢？

react native 系统库中只提供了ios的实现，即actionsheetios.该控件的显示方式有两种实现：

（1）showactionsheetwithoptions

（2）showshareactionsheetwithoptions

第一种是在ios设备上显示一个actionsheet弹出框。第二种实现是在ios设备上显示一个分享弹出框。借用官方的图片说明如下：

  

ios设备上的实现系统已经提供了，接下来我们就需要如何适配android。在原生开发中，自定义view也是有基本的流程：

（1）自定义控件类，继承view或系统控件。

（2）自定义属性

（3）获取自定义属性，并初始化一系列工具类

（4）重写onmeasure方法，对控件进行测量

（5）如果是自定义布局，还需要重写onlayout进行布局

在react native中自定义组件的思路基本和原生自定义相似。所以按照这个流程，我们一步步实现即可。

二、功能实现

1、自定义组件，实现component

export default class androidactionsheet extends component 

2、自定义属性

// 1.声明所需要的属性 
static proptypes= { 
  title: react.proptypes.string, // 标题 
  content: react.proptypes.object, // 内容 
  show: react.proptypes.func, // 显示 
  hide: react.proptypes.func, // 隐藏 
} 

constructor(props) { 
  super(props); 
  this.translatey = 150; 
  this.state = { 
    visible: false, 
    sheetanim: new animated.value(this.translatey) 
  } 
  this.cancel = this.cancel.bind(this); 
} 

3、实现基本布局

/** 
* modal为最外层，scrollview为内容层 
*/ 
render() { 
    const { visible, sheetanim } = this.state; 
    return( 
      <modal 
      visible={ visible } 
      transparent={ true } 
      animationtype="none" 
      onrequestclose={ this.cancel } 
      > 
      <view style={ styles.wrapper }> 
              <touchableopacity style={styles.overlay} onpress={this.cancel}></touchableopacity> 
          <animated.view 
            style={[styles.bd, {height: this.translatey, transform: [{translatey: sheetanim}]}]}> 
            { this._rendertitle() } 
            <scrollview 
                      horizontal={ true } 
                      showshorizontalscrollindicator={ false }> 
              {this._rendercontainer()} 
            </scrollview> 
          </animated.view> 
        </view> 
      </modal> 
    ) 
} 

可以看到上面我们定义了基本的布局，布局中使用_rendertitle()方法来渲染标题部分，内容区域为scrollview，并且为横向滚动，即当菜单项超过屏幕宽度时，可以横向滑动选择。在内部调用了rendercontainer方法来渲染菜单：

/** 
* 标题 
*/ 
_rendertitle() { 
  const { title,titlestyle } = this.props; 
  if (!title) { 
    return null 
  } 
    // 确定传入的是不是一个react element，防止渲染的时候出错 
  if (react.isvalidelement(title)) { 
    return ( 
      <view style={styles.title}>{title}</view> 
    ) 
  } 
  return ( 
    <text style={[styles.titletext,titlestyle]}>{title}</text> 
  ) 
} 
 
/** 
* 内容布局 
*/ 
_rendercontainer() { 
    const { content } = this.props; 
    return ( 
      <view style={styles.container}> 
        { content } 
      </view> 
    ) 
  } 

当我们需要点击modal，进行关闭时，还需要处理关闭操作，modal并没有为我们提供外部关闭处理，所以需要我们单独实现，从布局代码中我们看到touchableopacity作为遮罩层，并添加了单机事件，调用cancel来处理：

/** 
 * 控制modal点击关闭，android返回键关闭 
 */ 
 cancel() { 
  this.hide(); 
} 

4、自定义方法，对外调用

在外部我们需要控制控件的显示和隐藏，所以需要对外公开显示、关闭的方法：

/** 
 * 显示 
 */ 
show() { 
  this.setstate({visible: true}) 
  animated.timing(this.state.sheetanim, { 
    tovalue: 0, 
    duration: 250 
  }).start(); 
} 

/** 
 * 隐藏 
 */ 
hide() { 
   this.setstate({ visible: false }) 
   animated.timing(this.state.sheetanim, { 
    tovalue: this.translatey, 
    duration: 150 
   }).start(); 
} 

5、使用

<actionsheet 
 ref='sheet' 
 title='分享' 
 content={this._rendercontent()} 
/> 

至此，我们自定义组件就完成了。整体来看，基本的原理还是很简单的，主要利用了自定义属性，传参，动画，就可以轻松的实现了。本篇博客重点不是为了让大家知道怎么去写出这个效果，而是让大家明白，当我们遇到一个需要自定义的实现时，该如何去一步步实现。

三、效果图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。