React-native 自定义actionsheet 即拿即用

• Z时代
• 2024-01-10
• 分类：综合

不管是写程序还是生活 要经常总结啊= =要不然真的会忘啊

今天经验值+++++， 待提升空间太大了。

===========================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

以上是 React-native 自定义actionsheet 即拿即用 的全部内容， 来源链接： utcz.com/z/383474.html