// index.js
import React from 'react';
import {
Text,
View,
Modal,
TouchableOpacity,
} from 'react-native';
import styles from './style';
/**
* 使用方法
* @param {boolean} [show] 布尔值,是否显示
* @param {function} [success] 确认按钮回调
* @param {function} [fail] 取消按钮回调
* @param {string} [type] alert和confirm两种类型,默认为alert
* @param {strint} [cancelText] 取消的按钮 文字,可自定义 默认为 ‘取消’
* @param {strint} [confirmText] 确认的按钮 文字,可自定义 默认为 ‘确认’
* @param {string} [title] 标题 默认为 ‘提示’
*/
// alert和confirm确认框
export default class FadeInView extends React.Component {
state = {
callbackConfirm: null,
callbackCancel: null
}
btnCancel = () => {
this.state.callbackCancel && this.state.callbackCancel()
}
btnConfirm = () => {
this.state.callbackConfirm && this.state.callbackConfirm()
}
render() {
let { show, success, fail, type, cancelText, confirmText, title } = this.props
typeof show === 'boolean' ? null : show = false
success ? this.state.callbackConfirm = success : null
fail ? this.state.callbackCancel = fail : null
typeof cancelText === 'string' ? null : cancelText = '取消'
typeof confirmText === 'string' ? null : confirmText = '确认'
typeof title === 'string' ? null : title = '提示'
return (
<View>
<Modal
animationType="fade"
transparent={true}
visible={show}
onRequestClose={() => { this.btnCancel() }}>
<View style={styles.container}>
<View style={styles.bodyView}>
<View style={styles.bodyContentView}>
<View style={styles.bodyContentTitleView}>
<Text style={styles.bodyContentTitle}>{title}</Text>
</View>
<View style={[
styles.bodyContentTitleView,
styles.bodyContentChildrenView
]}>
{this.props.children}
</View>
</View>
<View style={styles.btn}>
{
type == 'confirm'
? <TouchableOpacity
style={[
styles.btnView,
styles.cancelView
]}
activeOpacity={1}
onPress={() => this.btnCancel()}>
<Text style={styles.cancelText}>{cancelText}</Text>
</TouchableOpacity>
: null
}
<TouchableOpacity
style={{
...styles.btnView,
...styles.confirmView,
backgroundColor: type == 'confirm' ? '#da2c2c' : '#fff',
borderBottomLeftRadius: type == 'confirm' ? 0 : 5
}}
activeOpacity={1}
onPress={() => this.btnConfirm()}>
<Text style={{
...styles.confirmText,
color: type == 'confirm' ? '#fff' : '#333'
}}>{confirmText}</Text>
</TouchableOpacity>
</View>
</View>
</View>
</Modal>
</View>
);
}
}
样式文件
import { StyleSheet } from 'react-native';
export default styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'rgba(0,0,0,.3)',
zIndex: 97,
},
bodyView: {
flex: 1,
backgroundColor: '#fff',
height: 'auto',
marginLeft: 50,
marginRight: 50,
zIndex: 88,
borderRadius: 5,
},
bodyContentView: {
padding: 20
},
bodyContentTitleView: {
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center'
},
bodyContentTitle: {
color: '#333',
fontSize: 16
},
bodyContentChildrenView:{
paddingTop:20,
paddingBottom:20
},
btn: {
borderTopWidth: .5,
borderTopColor: '#ccc',
flexDirection: 'row',
alignItems: 'center',
},
btnView: {
flex: 1,
height: 40,
justifyContent: 'center',
borderBottomRightRadius: 5
},
confirmView: {
borderBottomRightRadius: 5
},
confirmText: {
textAlign: 'center'
},
cancelView: {
backgroundColor: '#fff',
borderBottomLeftRadius: 5
},
cancelText: {
textAlign: 'center',
color: '#333'
}
})
使用方法
import React, { Component } from 'react';
import {
Text,
View
ScrollView
} from 'react-native';
import Confirm from '@/components/confirm';
// 测试
class PersonalCenter extends Component {
constructor(props) {
super(props);
this.state = {
show: false
}
}
// 退出登录
_success= () => {
// 事件处理
}
render() {
return (
<ScrollView style={{flex:1}} >
<Text onPress={() =>this.setState({ show: true })}>
退出登录
</Text>
{/* 确认框 */}
<Confirm
show={this.state.show}
type="confirm"
success={() => this._success()}
fail={() => this.setState({ show: false })}>
<View>
<Text>是否要退出登录?</Text>
</View>
</Confirm>
</ScrollView>
);
}
}
export default Home;
效果
confirm效果
网友评论