自定义ActionSheet

效果如图所示

image.png
image.png

代码如下

import React from 'react';
import {Image, Text, View, TouchableOpacity, Modal,Dimensions, SafeAreaView,StyleSheet} from 'react-native';
import PropTypes from  'prop-types'
const {width,height} =Dimensions.get('window')
export default class ActionSheet extends React.PureComponent{

    static propTypes={
        items:PropTypes.array,
        itemStyle:PropTypes.object,
        actionTitleStyle:PropTypes.object,
        itemTitleStyle:PropTypes.object,
        modalTitle:PropTypes.string,
        onItemClick:PropTypes.func
    }
    static defaultProps={
        items:[],
        itemStyle:{},
        actionTitleStyle:{},
        itemTitleStyle:{},
        modalTitle:''
    }

    constructor(props){
        super(props)

    }
    state = {
        items:this.props.items,
        modalVisible: false
    };


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

    /*
    * @params data: [{
    * title,onPress
    * }]
    * */
    showAction(data){
        this.setState({
            items:data
        },()=>{
            this.showModal()
        })
    }

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

    clickItem(item){
        if(item.onPress){
            item.onPress()
            return;
        }
        if(this.props.onItemClick){
            this.props.onItemClick(item)
        }
    }

    render(){

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

        return (
            <Modal animationType="fade"  //slide
                   visible={this.state.modalVisible}
                   transparent={true}
                   onRequestClose={()=>this.setState({modalVisible:false})}
            >
                <View style={styles.modalStyle}>

                    <View
                        // style={styles.modalStyle}
                    >
                        <View style={styles.subView}>
                            <View style={styles.itemContainer}>
                                {this.props.modalTitle ? (
                                    <View style={[styles.itemContainer,{height:60,marginTop:5}]}>
                                        <Text style={[styles.actionTitle,this.props.actionTitleStyle]}
                                        >{this.props.modalTitle}</Text>
                                    </View>
                                ):null}


                                {actionSheets}
                            </View>

                            {/*取消按钮*/}
                            <View style={[styles.itemContainer]}>
                                <TouchableOpacity
                                    style={[styles.actionItem,this.props.itemStyle,{borderTopWidth:0,height:80,marginBottom:-5,backgroundColor:'white'}]}
                                    onPress={()=>this.setState({modalVisible:false})}>
                                    <Text style={[styles.actionItemTitle,this.props.itemTitleStyle]}>取消</Text>
                                </TouchableOpacity>
                            </View>

                        </View>
                    </View>
                </View>

            </Modal>
        );
    }
}


const styles = StyleSheet.create({
    modalStyle: {
        justifyContent: 'flex-end',
        alignItems: 'center',
        flex: 1,
        backgroundColor: 'rgba(0,0,0,0.2)'
    },
    subView: {
        justifyContent: 'flex-end',
        alignItems: 'center',
        alignSelf: 'stretch',
        width: width,
// backgroundColor:'blue'
    },
    itemContainer: {
        marginLeft: 15,
        marginRight: 15,
        marginBottom: 5,
        // borderRadius:6,
        backgroundColor: '#fff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    actionItem: {
        width: width,
        height: 60,
        alignItems: 'center',
        justifyContent: 'center',
        borderTopColor: '#cccccc',
        borderTopWidth: 0.5,
    },
    actionTitle: {
        fontSize: 14,
        color: '#9EA3AD',
        textAlign: 'center',
        fontWeight:'bold'

    },
    actionItemTitle: {
        fontSize: 16,
        color: '#000',
        textAlign: 'center',
        fontWeight:'bold'
    },
})

调用：

   <ActionSheet
                        ref={ref=>{this.operateSheet = ref}}
                        items={[{title:'删除评论',id:'1'}]}
                        onItemClick={(item)=>{
                            if(item.id === '1'){
                                this.deleteCallback()
                                this.operateSheet.cancelModal()
                            }
                        }}
                    />

 this.operateSheet.showAction([
                        {
                            title:'删除',
                            onPress:()=>{

                            }
                        }
                    ])