自定義Alert
/**
* Created by wufeng on 2017/1/4.
*/
import React, {
Component
} from 'react'
import {
StyleSheet,
View,
TouchableOpacity,
Modal,
Text,
ListView,
PixelRatio,
Platform,
Image
} from 'react-native'
import Dimensions from 'Dimensions'
const {width, height} = Dimensions.get('window');
/**
* 確認(rèn)框
* 傳過來的參數(shù):
* {
* leftButtonText: '',// 左邊按鈕的文字
* onLeftClick: function,// 點(diǎn)擊左邊按鈕的回調(diào)
* rightButtonText: '',// 右邊按鈕的文字
* onRightClick: function,// 點(diǎn)擊右邊按鈕的回調(diào)
* title: "",// 標(biāo)題
* message: "",// 提示信息
* }
*/
export default class AlertModal extends Component {
constructor(props) {
super(props);
this.state = {
modalVisible: false,
leftButtonText: props.leftButtonText,
rightButtonText: props.rightButtonText,
title: props.title,
message: props.message,
}
}
componentWillMount() {
}
render() {
return (
<Modal
transparent={true}
visible={this.state.modalVisible}
onRequestClose={() => this.hide(false)}>
<View style={modalStyle.container}>
<View style={modalStyle.dialogContainer}>
{this.state.title ?
<Text style={modalStyle.dialogTitle}>{this.state.title}</Text> : null
}
<Text style={[modalStyle.dialogPrompt, this.props.messageStyle]}>{this.state.message}</Text>
<View style={modalStyle.buttonContainer}>
{this.state.leftButtonText ?
<TouchableOpacity
onPress={() => this.props.onLeftClick()}
style={[modalStyle.dialogConfirmButton, modalStyle.leftButton]}>
<Text style={modalStyle.dialogConfirmButtonText}>{this.state.leftButtonText}</Text>
</TouchableOpacity>
: null
}
<TouchableOpacity
onPress={() => this.props.onRightClick()}
style={[modalStyle.dialogConfirmButton, modalStyle.rightButton, this.state.leftButtonText ? {} : modalStyle.leftButton]}>
<Text style={modalStyle.dialogConfirmButtonText}>{this.state.rightButtonText}</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
);
}
setLeftText(leftButtonText) {
this.setState({
leftButtonText: leftButtonText
})
}
setRightText(rightButtonText) {
this.setState({
rightButtonText: rightButtonText
})
}
setTitle(title) {
this.setState({
title: title
})
}
setMessage(message) {
this.setState({
message: message
})
}
/**
* 顯示
*/
show() {
this.setState({
modalVisible: true,
})
}
/**
* 隱藏
*/
hide() {
this.setState({
modalVisible: false,
})
}
}
var modalStyle = StyleSheet.create({
container: {
width: width,
height: height,
justifyContent: 'center',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
},
dialogContainer: {
marginLeft: 30,
marginRight: 30,
borderTopLeftRadius:8,
borderTopRightRadius:8,
backgroundColor: 'white',
},
dialogTitle: {
fontSize: 16,
paddingLeft: 20,
paddingRight: 20,
textAlign: 'center',
marginTop:15,
marginBottom: -12,
marginLeft:10,
marginRight:10,
fontWeight:'900',
color:'#333333',
},
dialogPrompt: {
fontSize: 14,
marginTop: 16,
marginBottom: 16,
alignSelf: 'center',
marginLeft:29,
marginRight:29,
fontWeight:'100',
lineHeight:22,
color:'black',
textAlign:'center',
},
buttonContainer: {
flexDirection: 'row',
flex: 1,
},
dialogConfirmButton: {
height: 44,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'white',
flex: 1,
borderWidth: 1 / PixelRatio.get(),
borderColor: '#aaaaaa',
},
leftButton: {
borderBottomLeftRadius: 8,
marginRight: -(1 / PixelRatio.get()),
borderRightWidth: 0
},
rightButton: {
borderBottomRightRadius: 8,
},
buttonVerticalLine: {
backgroundColor: '#aaaaaa',
width: 1,
},
buttonHorizontalLine: {
backgroundColor: '#aaaaaa',
height: 1,
},
dialogConfirmButtonText: {
color: '#007aff',
fontSize: 16,
}
});
<AlertModal
ref={AlertModal => this.AlertModal = AlertModal}
message='這是一個自定義彈窗'
title = '11111'
rightButtonText='確定'
//leftButtonText='取消'
onRightClick={()=>{
this.AlertModal.hide();
this.AlertModal.setTitle('haha');
}}
onLeftClick={()=>{
this.AlertModal.hide();
}}
/>
<TouchableOpacity onPress={() => {
this.AlertModal.show();
}} style={{marginTop:30}}>
<Text style={{fontSize:20}}>彈出Modal</Text>
</TouchableOpacity>
</View>