React-native 自定义actionsheet 即拿即用

不管是写程序还是生活 要经常总结啊= =要不然真的会忘啊
今天经验值+++++， 待提升空间太大了。

===========================js文件============================

import React from 'react';
import PropTypes from 'prop-types';

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

export default class RNActionSheet_CL extends React.Component {

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

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



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

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

clickItem(id){
    this.props.actionsheetItemClick(id);
}

render(){
    let actionSheets = this.props.items.map((item,i)=>{
        return(
            <TouchableOpacity
                key={I}
                style={[styles.actionItem,this.props.itemStyle]}
                onPress={()=>this.clickItem(item.id)}>
                <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.subView}>
                <View style={styles.itemContainer}>
                    <View style={[styles.itemContainer,{height:55,marginTop:5}]}>
                    <Text style={[styles.actionTitle,this.props.actionTitleStyle]}
                    >{this.props.modalTitle}</Text>
                    </View>
                    {actionSheets}
                </View>

                {/*取消按钮*/}
                <View style={[styles.itemContainer]}>
                    <TouchableOpacity
                        style={[styles.actionItem,this.props.itemStyle,{borderTopWidth:0,height:50,marginBottom:-5,backgroundColor:'white'}]}
                        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,
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:50,
    alignItems:'center',
    justifyContent:'center',
    borderTopColor:'#cccccc',
    borderTopWidth:0.5,
},
actionTitle:{
    fontSize:14,
    color:'#9EA3AD',
    textAlign:'center',


},
actionItemTitle:{
    fontSize:18,
    color:'#243047',
    textAlign:'center',
},

})
===========================js文件============================

用的时候 都在同一个界面
1.import RNActionSheet_CL from "../../RNActionSheet_CL";

2.     <RNActionSheet_CL
                ref="RNActionSheet_CL"
                items={[{title:'多次电话未接通',id:'1'},{title:'用户放弃',id:'2'},{title:'活动按钮',id:'3'}]}
                actionsheetItemClick={this.actionsheetItemClick}
                modalTitle={"请选择取消原因"} />
   

3. 写一个按钮 呼出actionsheet ：
   this.refs.RNActionSheet_CL.showModal();
   4.当点击其中一个item的时候：
   actionsheetItemClick=(id)=>{
   console.log(id);
   }
   嗯 就酱

image.png