欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2018年02月08日 15:28:40   作者：Songlcy  
本篇文章主要介紹了React Native自定義控件底部抽屜菜單的示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、需求分析

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

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

（1）showActionSheetWithOptions

（2）showShareActionSheetWithOptions

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

  

IOS設(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中自定義組件的思路基本和原生自定義相似。所以按照這個流程，我們一步步實現(xiàn)即可。

二、功能實現(xiàn)

1、自定義組件，實現(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、實現(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ū)域為ScrollView，并且為橫向滾動，即當(dā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)我們需要點擊Modal，進(jìn)行關(guān)閉時，還需要處理關(guān)閉操作，Modal并沒有為我們提供外部關(guān)閉處理，所以需要我們單獨實現(xiàn)，從布局代碼中我們看到TouchableOpacity作為遮罩層，并添加了單機(jī)事件，調(diào)用cancel來處理：

/** 
 * 控制Modal點擊關(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()} 
/>

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

三、效果圖

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching

    React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching

    這篇文章主要為大家介紹了React?SSR架構(gòu)Stream?Rendering與Suspense?for?Data?Fetching解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-03-03
  • React html中使用react的兩種方式

    React html中使用react的兩種方式

    這篇文章主要介紹了React html中使用react的兩種方式,本文給大家提到了React pwa的配置代碼，給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-04-04
  • React創(chuàng)建組件的的方式匯總

    React創(chuàng)建組件的的方式匯總

    React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。這篇文章主要介紹了React組件的兩種創(chuàng)建方式,一種是使用函數(shù)創(chuàng)建組件另一種是使用類創(chuàng)建組件，需要的朋友可以參考下
    2021-11-11
  • React?實現(xiàn)具備吸頂和吸底功能組件實例

    React?實現(xiàn)具備吸頂和吸底功能組件實例

    這篇文章主要為大家介紹了React?實現(xiàn)具備吸頂和吸底功能組件實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
    2023-02-02
  • 基于React的狀態(tài)管理實現(xiàn)一個簡單的顏色轉(zhuǎn)換器

    基于React的狀態(tài)管理實現(xiàn)一個簡單的顏色轉(zhuǎn)換器

    這篇文章主要介紹了用React的狀態(tài)管理,簡簡單單實現(xiàn)一個顏色轉(zhuǎn)換器,文中有詳細(xì)的代碼示例供大家參考,具有一定的參考價值,需要的朋友可以參考下
    2023-08-08
  • Unity?RectTransform詳解

    Unity?RectTransform詳解

    unity中的ui元素是有嚴(yán)格的父子關(guān)系的,子物體的位置是根據(jù)父物體的變化而變化的,而子物體和父物體聯(lián)系的橋梁就是Anchor,本文重點介紹Unity?RectTransform的相關(guān)知識,感興趣的朋友一起看看吧
    2024-01-01
  • 教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識和useContext

    教你react中如何理解usestate、useEffect副作用、useRef標(biāo)識和useContext

    這篇文章主要介紹了react中如何理解usestate、useEffect副作用、useRef標(biāo)識和useContext,其實與vue中的ref和reactive一樣，通過useState獲取到的數(shù)據(jù)可以實現(xiàn)組件視圖實時交互，而普通定義的數(shù)據(jù)僅僅在業(yè)務(wù)中使用，需要的朋友可以參考下
    2022-11-11
  • React路由組件三種傳參方式分析講解

    React路由組件三種傳參方式分析講解

    本文主要介紹了React組件通信之路由傳參(react-router-dom)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-08-08
  • React中useState值為對象時改變值不渲染問題

    React中useState值為對象時改變值不渲染問題

    這篇文章主要介紹了React中useState值為對象時改變值不渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-02-02
  • react實現(xiàn)菜單權(quán)限控制的方法

    react實現(xiàn)菜單權(quán)限控制的方法

    本篇文章主要介紹了react實現(xiàn)菜單權(quán)限控制的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-12-12

最新評論