react native Modal 实现ActionSheet

来源：互联网发布：数据库的课程设计编辑：程序博客网时间：2024/05/21 03:18

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;

阅读全文

0 0