对话框的问题:是一个很常见的问题,比如说删除时,就要询问用户,是否确认删除,这是为了避免用户误操作,使用react native时总想到的时用alert去写,实际上alert的样式在Android根本无法修改,所以如果是为了实现对话框,根本就可以完全不用Alert,而改用Modal,我们自己写一个满意的对话框就好了。
下面就是借用react-native-modal 组件修改出来的对话框
import React from "react";
import { Text, View, StyleSheet } from 'react-native';
import Modal from "react-native-modal";
/*
删除对话框
*/
class ModalDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
show: true
}
}
render() {
return (
<Modal
isVisible={this.state.show}
useNativeDriver={true} //闪烁的问题
hideModalContentWhileAnimating={true} //闪烁问题
avoidKeyboard={true} //键盘出现时,modal向上移动
style={{ margin: 0, flex: 1, justifyContent: "center",alignItems:"center" }} //margin:0保证覆盖整个屏幕
backdropOpacity={0.2}
onBackdropPress={() => this.handleBackPressModal()}
>
<View style={styles.dialogBox}>
<Text style={styles.dialogTitle}>确认删除吗?</Text>
<View style={styles.btnBox}>
<Text style={[styles.dialogBtn,{color: "#2095F3"}]}>确认</Text>
<Text style={[styles.dialogBtn,{color:"#000"}]}>取消</Text>
</View>
</View>
</Modal>
);
}
handleBackPressModal(){
this.setState({ show: false });
}
}
let styles = StyleSheet.create({
dialogBox:{
width: 300,
backgroundColor: "#fff",
borderRadius: 5,
paddingHorizontal: 10,
paddingVertical: 15
},
dialogTitle:{
textAlign:"center",
fontSize: 18
},
btnBox:{
display:"flex",
flexDirection:"row",
borderTopColor: "#ccc",
borderTopWidth: 1,
// backgroundColor:"yellow",
marginTop: 15,
paddingTop: 10
},
dialogBtn:{
fontSize:20,
fontWeight: "900",
flexGrow:1,
textAlign:"center"
}
});
export default ModalDialog;