本文展示了如何在React Native中创建一个自定义的底部弹出选择框，用于滑动验证功能。组件使用`Dimensions`获取窗口宽度，并通过`Modal`组件实现弹出效果。内容包括组件的构造函数、状态管理、接收属性、关闭模态框的方法以及渲染列表项和对话框的逻辑。样式方面，设置了背景透明度、模态框位置、宽度和颜色等。
import React, {Component} from 'react';
import {Dimensions, Modal, StyleSheet, Text, TouchableOpacity, View}from 'react-native';const {width} = Dimensions.get('window');
exportdefault classCustomAlertDialog extends Component {
constructor(props) {
super(props);this.state ={
isVisible:this.props.show,
};this.entityList = this.props.entityList;
}
componentWillReceiveProps(nextProps) {this.setState({isVisible: nextProps.show});
}
closeModal() {this.setState({
isVisible:false});this.props.closeModal(false);
}
renderItem(item, i) {return(
{item}
);
}
choose(i) {if (this.state.isVisible) {this.props.callback(i);this.closeModal();
}
}
renderDialog() {return(
{this.entityList.map((item, i) => this.renderItem(item, i))
}
)
}
render() {return(
transparent={true}
visible={this.state.isVisible}
animationType={'fade'}
onRequestClose={() => this.closeModal()}>
onPress={() => this.closeModal()}>{this.renderDialog()}
);
}
}const styles =StyleSheet.create({
container: {
flex:1,
backgroundColor:'rgba(0, 0, 0, 0.5)',
},
modalStyle: {
position:"absolute",
left:0,
bottom:0,
width: width,
flex:1,
flexDirection:"column",
backgroundColor:'#ffffff',
},
optArea: {
flex:1,
flexDirection:'column',
marginTop:12,
marginBottom:12,
},
item: {
width: width,
height:40,
paddingLeft:20,
paddingRight:20,
alignItems:'center',
},
itemText: {
fontSize:16,
},
cancel: {
width: width,
height:30,
marginTop:12,
alignItems:'center',
backgroundColor:'#ffffff'},
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
