首頁 > 文章 > web前端 > React Native自訂元件實現抽屜選單控制效果

React Native自訂元件實現抽屜選單控制效果

小云云原創: 2018-02-09 09:40:473004瀏覽

一、需求分析

原生開發中，自訂View可謂是屢見不鮮的事情，往往系統的控制項總無法滿足現實的需求。五花八門的產品設計需要我們做出不同的View。關於自訂View的內容網路上已經有很多的博文，本篇部落格要和大家分享如何在React Native中自訂元件實現抽屜選單控制效果。分享功能在App中的重要性想必是不言而喻的，那麼RN中該如何達到效果呢？本文主要和大家介紹了React Native自訂控制底部抽屜選單的範例。

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=&#39;sheet&#39; 
 title=&#39;分享&#39; 
 content={this._renderContent()} 
/>

至此，我們自訂元件就完成了。整體來看，基本的原理還是很簡單的，主要利用了自訂屬性，傳參，動畫，就可以輕鬆的實現了。這篇部落格重點不是為了讓大家知道怎麼去寫出這個效果，而是讓大家明白，當我們遇到一個需要自訂的實作時，該如何去一步步實現。

三、效果圖

React Native自訂元件實現抽屜選單控制效果

相關文章