react native 元件封裝進階 ActionSheet動作面板

摘要： 開發中常用到：比如：選擇相簿，選擇拍照等，這個底部彈出框選擇，我們稱之為 action sheet動作面板 actionsheet.gif 這個元件寫起來比較有意思 ，巧妙的使用了 this.props. children ...

開發中常用到：比如：選擇相簿，選擇拍照等，這個底部彈出框選擇，我們稱之為 action sheet動作面板

這個元件寫起來比較有意思 ，巧妙的使用了 this.props. children 可以自定義 每個 ActionDom

下面看下程式碼：

'use strict';

import React, { Component } from 'react';
import { Modal, View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import BaseStyle from '../constants/Style';
import PropTypes from 'prop-types';

/**
 * 使用方法
 * 
 * import { ActionSheet, ActionDom } from '../components/actionsheet';
<ActionSheet
showAction={this.state.showAction}
cancel={()=>{this.setState({showAction:false})}}
>
<ActionDom 
actionName={'我是按鈕一'}
onPress={()=>{
alert("你點選了按鈕一")
}}
/>
<ActionDom 
actionName={'我是按鈕二'}
onPress={()=>{
alert("你點選了按鈕一")
}}
/>
</ActionSheet>

 */

export class ActionSheet extends Component {
static defaultProps = {
animationType: 'slide',
title: '',
};
static propTypes = {
animationType: PropTypes.string, //模態彈出效果
ActionItem: PropTypes.element, //動作名稱陣列的形式
ActionArray: PropTypes.array,
showAction: PropTypes.bool,
cancel: PropTypes.func, // 取消操作
title: PropTypes.string, //頭部
titleTextStyle: PropTypes.object, //標題樣式
children: PropTypes.element,
};

constructor(props) {
super(props);
}

render() {
const {
animationType,
showAction,
title,
titleTextStyle,
cancel,
} = this.props;

return (
<Modal
animationType={"slide"}
transparent={true}
onRequestClose={() => {}}
visible={showAction}>
<TouchableOpacity
style={styles.modelView}
onPress={cancel}
activeOpacity={0.9}>
<View style={styles.bottomView}>
{title ? (
<View style={styles.TitleView}>
<Text style={[styles.titleText, titleTextStyle]}>{title}</Text>
<TouchableOpacity style={styles.closeView} onPress={cancel}>
<Text style={styles.close}></Text>
</TouchableOpacity>
</View>
) : null}
{this.props.children}
<TouchableOpacity
style={[styles.items, styles.cancl]}
onPress={cancel}>
<Text style={styles.itemsText}>取消</Text>
</TouchableOpacity>
</View>
</TouchableOpacity>
</Modal>
);
}
}

export class ActionDom extends Component {
static defaultProps = {
actionName: '按鈕一',
};
static propTypes = {
actionName: PropTypes.string, //模態彈出效果
onPress: PropTypes.func,
};
render() {
const { actionName, onPress } = this.props;
return (
<TouchableOpacity style={styles.items} onPress={onPress}>
<Text style={styles.itemsText}>{actionName}</Text>
</TouchableOpacity>
);
}
}

const styles = StyleSheet.create({
modelView: {
flex: 1,
backgroundColor: 'rgba(40,40,40,0.4)',
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
},
bottomView: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
backgroundColor: '#fff',
},
TitleView: {
...BaseStyle.row,
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
borderBottomWidth: 1,
borderBottomColor: '#eee',
paddingTop: 10,
paddingBottom: 10,
},
titleText: {
fontSize: 14,
color: '#aaa',
},
closeView: {
position: 'absolute',
right: 15,
top: 8,
},
close: {
fontFamily: 'iconfont',
fontSize: 20,
color: '#ccc',
},
items: {
...BaseStyle.row,
...BaseStyle.justifyContentCenter,
...BaseStyle.alignItemsCenter,
height: 50,
borderBottomWidth: 1,
borderBottomColor: '#eee',
},
cancl: {
borderTopWidth: 4,
borderTopColor: '#eee',
},
itemsText: {
fontSize: 15,
color: '#333',
},
});

使用

import { ActionSheet, ActionDom } from '../components/actionsheet';
<ActionSheet
showAction={this.state.showAction}
cancel={()=>{this.setState({showAction:false})}}
>
<ActionDom 
actionName={'我是按鈕一'}
onPress={()=>{
alert("你點選了按鈕一")
}}
/>
<ActionDom 
actionName={'我是按鈕二'}
onPress={()=>{
alert("你點選了按鈕一")
}}
/>
</ActionSheet>