React Native自定義控件底部抽屜菜單的示例
一、需求分析
原生開發(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方法，對控件進行測量
（5）如果是自定義布局，還需要重寫onLayout進行布局
在React Native中自定義組件的思路基本和原生自定義相似。所以按照這個流程，我們一步步實現(xiàn)即可。
二、功能實現(xiàn)
1、自定義組件，實現(xiàn)Component
export default class AndroidActionSheet extends Component
2、自定義屬性
// 1.聲明所需要的屬性
static propTypes= {
title: React.PropTypes.string, // 標題
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()方法來渲染標題部分，內(nèi)容區(qū)域為ScrollView，并且為橫向滾動，即當菜單項超過屏幕寬度時，可以橫向滑動選擇。在內(nèi)部調(diào)用了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>
)
}
/**
* 內(nèi)容布局
*/
_renderContainer() {
const { content } = this.props;
return (
<View style={styles.container}>
{ content }
</View>
)
}
當我們需要點擊Modal，進行關(guān)閉時，還需要處理關(guān)閉操作，Modal并沒有為我們提供外部關(guān)閉處理，所以需要我們單獨實現(xiàn)，從布局代碼中我們看到TouchableOpacity作為遮罩層，并添加了單機事件，調(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)了。本篇博客重點不是為了讓大家知道怎么去寫出這個效果，而是讓大家明白，當我們遇到一個需要自定義的實現(xiàn)時，該如何去一步步實現(xiàn)。
三、效果圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了react組件基本用法,結(jié)合實例形式分析了react組件傳值、生命周期、受控組件和非受控組件等相關(guān)操作技巧,需要的朋友可以參考下2020-04-04
React-Hooks之useImperativeHandler使用介紹
這篇文章主要為大家介紹了React-Hooks之useImperativeHandler使用介紹，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
這篇文章主要為大家詳細介紹了react使用axios實現(xiàn)上傳下載功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
React實現(xiàn)模糊搜索和關(guān)鍵字高亮的示例代碼
這篇文章主要為大家詳細介紹了React如何實現(xiàn)模糊搜索和關(guān)鍵字高亮的效果,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11
useRef是react的自定義hook,它用來引用一個不需要渲染的值,這篇文章介紹useRef的簡單用法,感興趣的朋友一起看看吧2024-01-01
這篇文章主要介紹了React事件機制源碼解析的相關(guān)資料，幫助大家更好的理解和學習使用React框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要為大家介紹了React特征學習之Form格式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
React報錯之Object?is?possibly?null的問題及解決方法
這篇文章主要介紹了React報錯之Object?is?possibly?null的問題,造成 "Object is possibly null"的錯誤是因為useRef()鉤子可以傳遞一個初始值作為參數(shù)，而我們傳遞null作為初始值，本文給大家分享詳細解決方法，需要的朋友可以參考下2022-07-07
useCallback是react中比較重要的一個hook，useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2023-01-01
這篇文章主要為大家詳細介紹了react實現(xiàn)動態(tài)表單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08