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',
        alignItems:'center',
        alignSelf:'stretch',
        width:width,
    },
    itemContainer:{
        marginLeft:15,
        marginRight:15,
        marginBottom:15,
        borderRadius:6,
        backgroundColor:'#fff',
        justifyContent:'center',
        alignItems:'center',
    },
    actionItem:{
        width:width-30,
        height:45,
        alignItems:'center',
        justifyContent:'center',
        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',
        textAlign:'center',
    },
})
export default MyBottomSheet;