快捷導(dǎo)航

React Native自定義控件底部抽屜菜單的示例

更新時(shí)間：2018年02月08日 15:28:40 作者：Songlcy

本篇文章主要介紹了React Native自定義控件底部抽屜菜單的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

一、需求分析

原生開發(fā)中，自定義View可謂是屢見不鮮的事情，往往系統(tǒng)的控件總不能滿足現(xiàn)實(shí)的需求。五花八門的產(chǎn)品設(shè)計(jì)需要我們做出不同的View。關(guān)于自定義View的內(nèi)容網(wǎng)上已經(jīng)有很多的博文，本篇博客要和大家分享如何在React Native中自定義組件實(shí)現(xiàn)抽屜菜單控件效果。分享功能在App中的重要性想必是不言而喻的，那么RN中如何實(shí)現(xiàn)這種效果呢？

React Native 系統(tǒng)庫(kù)中只提供了IOS的實(shí)現(xiàn)，即ActionSheetIOS.該控件的顯示方式有兩種實(shí)現(xiàn)：

（1）showActionSheetWithOptions

（2）showShareActionSheetWithOptions

第一種是在iOS設(shè)備上顯示一個(gè)ActionSheet彈出框。第二種實(shí)現(xiàn)是在iOS設(shè)備上顯示一個(gè)分享彈出框。借用官方的圖片說明如下：

IOS設(shè)備上的實(shí)現(xiàn)系統(tǒng)已經(jīng)提供了，接下來我們就需要如何適配Android。在原生開發(fā)中，自定義View也是有基本的流程：

（1）自定義控件類，繼承View或系統(tǒng)控件。

（2）自定義屬性

（3）獲取自定義屬性，并初始化一系列工具類

（4）重寫onMeasure方法，對(duì)控件進(jìn)行測(cè)量

（5）如果是自定義布局，還需要重寫onLayout進(jìn)行布局

在React Native中自定義組件的思路基本和原生自定義相似。所以按照這個(gè)流程，我們一步步實(shí)現(xiàn)即可。

二、功能實(shí)現(xiàn)

1、自定義組件，實(shí)現(xiàn)Component

export default class AndroidActionSheet extends Component

2、自定義屬性

// 1.聲明所需要的屬性 
static propTypes= { 
  title: React.PropTypes.string, // 標(biāo)題 
  content: React.PropTypes.object, // 內(nèi)容 
  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、實(shí)現(xiàn)基本布局

/** 
* Modal為最外層，ScrollView為內(nèi)容層 
*/ 
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()方法來渲染標(biāo)題部分，內(nèi)容區(qū)域?yàn)镾crollView，并且為橫向滾動(dòng)，即當(dāng)菜單項(xiàng)超過屏幕寬度時(shí)，可以橫向滑動(dòng)選擇。在內(nèi)部調(diào)用了renderContainer方法來渲染菜單：

/** 
* 標(biāo)題 
*/ 
_renderTitle() { 
  const { title,titleStyle } = this.props; 
  if (!title) { 
    return null 
  } 
    // 確定傳入的是不是一個(gè)React Element，防止渲染的時(shí)候出錯(cuò) 
  if (React.isValidElement(title)) { 
    return ( 
      <View style={styles.title}>{title}</View> 
    ) 
  } 
  return ( 
    <Text style={[styles.titleText,titleStyle]}>{title}</Text> 
  ) 
} 
 
/** 
* 內(nèi)容布局 
*/ 
_renderContainer() { 
    const { content } = this.props; 
    return ( 
      <View style={styles.container}> 
        { content } 
      </View> 
    ) 
  }

當(dāng)我們需要點(diǎn)擊Modal，進(jìn)行關(guān)閉時(shí)，還需要處理關(guān)閉操作，Modal并沒有為我們提供外部關(guān)閉處理，所以需要我們單獨(dú)實(shí)現(xiàn)，從布局代碼中我們看到TouchableOpacity作為遮罩層，并添加了單機(jī)事件，調(diào)用cancel來處理：

/** 
 * 控制Modal點(diǎn)擊關(guān)閉，Android返回鍵關(guān)閉 
 */ 
 cancel() { 
  this.hide(); 
}

4、自定義方法，對(duì)外調(diào)用

在外部我們需要控制控件的顯示和隱藏，所以需要對(duì)外公開顯示、關(guān)閉的方法：

/** 
 * 顯示 
 */ 
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()} 
/>

至此，我們自定義組件就完成了。整體來看，基本的原理還是很簡(jiǎn)單的，主要利用了自定義屬性，傳參，動(dòng)畫，就可以輕松的實(shí)現(xiàn)了。本篇博客重點(diǎn)不是為了讓大家知道怎么去寫出這個(gè)效果，而是讓大家明白，當(dāng)我們遇到一個(gè)需要自定義的實(shí)現(xiàn)時(shí)，該如何去一步步實(shí)現(xiàn)。

三、效果圖