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

reactNative 系统库中只提供了iOS的实现，即ActionSheetIOS.该控件的显示方式有两种实现：

（1）showActionSheetWithOptions

（2）showShareActionSheetWithOptions

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

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

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

（2）自定义属性

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

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

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

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

二、功能实现

1、自定义组件，实现Component

2、自定义属性

//1.声明所需要的属性
1. staticpropTypes={
2. title:React.PropTypes.string,//标题
3. content:React.PropTypes.object,//内容
4. show:React.PropTypes.func,//显示
5. hide:React.PropTypes.func,//隐藏
6. }

constructor(props){
1. super(props);
2. this.translateY=150;
3. this.state={
4. visible:false,
5. sheetAnim:newAnimated.Value(this.translateY)
6. }
7. this.cancel=this.cancel.bind(this);
8. }

3、实现基本布局

/**
1. *Modal为最外层，ScrollView为内容层
2. */
3. render(){
4. const{visible,sheetAnim}=this.state;
5. return(
6. <Modal
7. visible={visible}
8. transparent={true}
9. animationType="none"
10. onRequestClose={this.cancel}
11. >
12. Viewstyle={styles.wrapper}>
13. TouchableOpacitystyle={styles.overlay}onPress={this.cancel}></TouchableOpacityAnimated.View
14. style={[styles.bd,{height:this.translateY,transform:[{translateY:sheetAnim}]}]} {this._renderTitle()}
15. ScrollView
16. horizontal={true}
17. showsHorizontalScrollIndicator={false} {this._renderContainer()}
18. ScrollViewAnimated.ViewViewModal )
19. 可以看到上面我们定义了基本的布局，布局中使用_renderTitle()方法来渲染标题部分，内容区域为ScrollView，并且为横向滚动，即当菜单项超过屏幕宽度时，可以横向滑动选择。在内部调用了renderContainer方法来渲染菜单：

    copy

    *标题
    1. _renderTitle(){
    2. const{title,titleStyle}=this.props;
    3. if(!title){
    4. returnnull
    5. }
    6. //确定传入的是不是一个ReactElement，防止渲染的时候出错
    7. if(React.isValidElement(title)){
    8. return(
    9. Viewstyle={styles.title}>{title} )
    10. Textstyle={[styles.titleText,titleStyle]}Text
    11. /**
    12. *内容布局
    13. */
    14. _renderContainer(){
    15. const{content}=this.props;
    16. Viewstyle={styles.container} {content}
    17. }

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

    copy
    *控制Modal点击关闭，Android返回键关闭
    1. cancel(){
    2. this.hide();
    3. 4、自定义方法，对外调用

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

       copy
       *显示
       1. show(){
       2. this.setState({visible:true})
       3. Animated.timing(this.state.sheetAnim,{
       4. toValue:0,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> duration:250
       5. }).start();
       6. }
       copy
       *隐藏
       1. hide(){
       2. this.setState({visible:false})
       3. toValue:this.translateY,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> duration:150
       4. 5、使用
          copy
          ActionSheet
          1. ref='sheet'
          2. title='分享'
          3. content={this._renderContent()}
          4. />

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

          三、效果图
          近甚忙，趁晚色清静，闲暇之余，分享之。

          源码下载

          转自http://blog.csdn.NET/u013718120/article/details/73744581

          （编辑：李大同）

          【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!