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(
            this.clickItem(item.id)}>
                {item.title}
            
        )
    })


    return this.setState({modalVisible:false})}
    >
        
            
                
                    
                    {this.props.modalTitle}
                    
                    {actionSheets}
                

                {/*取消按钮*/}
                
                    this.setState({modalVisible:false})}>
                        取消
                    
                

            
        
    
}

}
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";

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

image.png