一、需求分析
原生開發中，自訂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='sheet'
title='分享'
content={this._renderContent()}
/>至此，我們自訂元件就完成了。整體來看，基本的原理還是很簡單的，主要利用了自訂屬性，傳參，動畫，就可以輕鬆的實現了。這篇部落格重點不是為了讓大家知道怎麼去寫出這個效果，而是讓大家明白，當我們遇到一個需要自訂的實作時，該如何去一步步實現。
三、效果圖
相關推薦：
以上是React Native自訂元件實現抽屜選單控制效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
