欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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

一、需求分析

創(chuàng)新互聯(lián)建站主要從事成都做網(wǎng)站、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)朔州,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

原生開發(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)庫中只提供了IOS的實(shí)現(xiàn)，即ActionSheetIOS.該控件的顯示方式有兩種實(shí)現(xiàn)：

（1）showActionSheetWithOptions

（2）showShareActionSheetWithOptions

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

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

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

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

（2）自定義屬性

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

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

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

在React Native中自定義組件的思路基本和原生自定義相似。所以按照這個流程，我們一步步實(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)菜單項(xiàng)超過屏幕寬度時，可以橫向滑動選擇。在內(nèi)部調(diào)用了renderContainer方法來渲染菜單：

/** 
* 標(biāo)題 
*/ 
_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> 
  ) 
} 
 
/** 
* 內(nèi)容布局 
*/ 
_renderContainer() { 
    const { content } = this.props; 
    return ( 
      <View style={styles.container}> 
        { content } 
      </View> 
    ) 
  }

當(dāng)我們需要點(diǎn)擊Modal，進(jìn)行關(guān)閉時，還需要處理關(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、自定義方法，對外調(diào)用

在外部我們需要控制控件的顯示和隱藏，所以需要對外公開顯示、關(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()} 
/>

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

三、效果圖

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

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享題目：ReactNative自定義控件底部抽屜菜單的示例
網(wǎng)站URL：http://chinadenli.net/article40/gdjdho.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、面包屑導(dǎo)航、響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站建設(shè)