react native Modal 实现ActionSheet

RN非常容易上手，而且很多组建均可以服用，Modal类似于Android/iOS的自定义dialog，位于整个屏幕最顶层，可做遮罩和蒙版效果，下面是自己封装的一个actionsheet，样式可以自定义，调用的时候使用ref就可以了，以下是源码：

import React,{Component,PropTypes} from 'react'
import {
    View,    StyleSheet,    Text,    Modal,    TouchableOpacity,    Dimensions
} from 'react-native'
const {width,height} =Dimensions.get('window')

class MyBottomSheet extends Component{
    static propTypes={
        items:PropTypes.array,        itemStyle:PropTypes.object,        actionTitleStyle:PropTypes.object,        itemTitleStyle:PropTypes.object,        modalTitle:PropTypes.string,    }
    static defaultProps={
        items:[],        itemStyle:{},        actionTitleStyle:{},        itemTitleStyle:{},        modalTitle:''
    }

    constructor(props){
        super(props)
        this.state = {
            modalVisible:false,        }
    }

    showModal(){
        this.setState({modalVisible:true})
    }

    cancelModal(){
        this.setState({modalVisible:false})
    }

    render(){
        let actionSheets = this.props.items.map((item,i)=>{
           return(
               <TouchableOpacity
                   key={i}
                   style={[styles.actionItem,this.props.itemStyle]}
                   onPress={item.click}>
                   <Text style={[styles.actionItemTitle,this.props.itemTitleStyle]}
                   >{item.title}</Text>
               </TouchableOpacity>
               )
        })


        return <Modal animationType="slide"
                      visible={this.state.modalVisible}
                      transparent={true}
                      onRequestClose={()=>this.setState({modalVisible:false})}
        >
        <View style={styles.modalStyle}>
            <View style={styles.subView}>
                <View style={styles.itemContainer}>
                    <Text style={[styles.actionTitle,this.props.actionTitleStyle]}
                    >{this.props.modalTitle}</Text>
                    {actionSheets}
                </View>
                <View style={[styles.itemContainer]}>
                    <TouchableOpacity
                        style={[styles.actionItem,this.props.itemStyle,{borderTopWidth:0}]}
                        onPress={()=>this.setState({modalVisible:false})}>
                        <Text style={[styles.actionItemTitle,this.props.itemTitleStyle]}>取消</Text>
                    </TouchableOpacity>
                </View>

            </View>
        </View>
        </Modal>
    }
}
const styles = StyleSheet.create({
    modalStyle:{
        justifyContent:'flex-end',        alignItems:'center',        flex:1
    },    subView:{
        justifyContent:'flex-end',        alignSelf:'stretch',        width:width,    },    itemContainer:{
        marginLeft:15,        marginRight:15,        marginBottom:15,        borderRadius:6,        backgroundColor:'#fff',        justifyContent:'center',    actionItem:{
        width:width-30,        height:45,        borderTopColor:'#cccccc',        borderTopWidth:0.5,    actionTitle:{
        fontSize:13,        color:'#808080',        textAlign:'center',        paddingTop:10,        paddingBottom:10,        paddingLeft:15,        paddingRight:15,    actionItemTitle:{
        fontSize:16,        color:'#444444',})
export default MyBottomSheet;