React Native自定義北京-賽車源碼出售彈出警告框
這裏寫圖片描述
實現也非常的簡單,使用Modal來進行自定義控件即可,下面是相關的代碼。
import React, {Component} from ‘react‘;
import PropTypes from ‘prop-types‘;
import {
StyleSheet,
Text,
View,
Modal,
TouchableOpacity,
} from ‘react-native‘;
let {width, height} = Dimensions.get("window");
export default class HRAlertView extends Component {
//定義靜態的屬性,可以通過this.props.alertTitle傳值 static propTypes = { alertTitle: PropTypes.string, //標題 alertContent: PropTypes.string, //文本內容 cancleName: PropTypes.string, //取消 conformName: PropTypes.string, //確定 } constructor(props) { super(props); this.state = ({ isShow: false, conformName:‘確定‘, cancleName:‘取消‘, }) } render() { if (!this.state.isShow) { return null; } else { return ( <Modal visible={this.state.isShow} //顯示是的動畫默認none //從下面向上滑動slide //慢慢顯示fade // animationType={‘fade‘} onRequestClose={() => { }} > <View style={styles.containerStyle}> { this.renderMongoliaView() } { this.renderAlertView() } </View> </Modal> ) } ; } //蒙層背景 renderMongoliaView() { return ( <TouchableOpacity style={styles.bgContainViewStyle} onPress={() => this.hideAlertView()}> <View></View> </TouchableOpacity> ); } //繪制Alert視圖 renderAlertView() { return ( <View style={styles.alertViewStyle}> <View style={styles.titleContainerStyle}> <Text style={styles.titleStyle}>{this.props.alertTitle}</Text></View> <View style={styles.contentContainerStyle}> <Text style={styles.contentStyle}>{this.props.alertContent}</Text></View> <View style={styles.horizontalLineStyle}/> <View style={styles.btnContainerStyle}> <TouchableOpacity onPress={() => { this.dissmissDialog(0); this.dissmissDialog(); this.props.comformClik ? this.props.comformClik() : null }} style={styles.btnStyle}> <Text style={{fontSize: 16, color: ‘#157efb‘, fontWeight: ‘700‘}}>{this.props.conformName}</Text> </TouchableOpacity> <View style={styles.verticalLineStyle}/> <TouchableOpacity onPress={() => { this.dissmissDialog(0); this.dissmissDialog(); this.props.cancelClick ? this.props.cancelClick() : null }} style={styles.btnStyle}> <Text style={{fontSize: 16, color: ‘#157efb‘}}>{this.props.cancleName}</Text> </TouchableOpacity> </View> </View> ); } hideAlertView() { this.setState({ isShow: false, }); } //顯示 showDialog() { this.setState({ isShow: true, }) } //消失彈窗,最好delay0.3秒 dissmissDialog = (delay) => { let duration = delay; this.timer = setTimeout(() => { this.setState({ isShow: false, }); this.timer && clearTimeout(this.timer); }, duration * 1000); }
}
const styles = StyleSheet.create({
bgContainViewStyle: {
height: height,
width: width,
position: ‘absolute‘,
opacity: 0.4,
backgroundColor: ‘rgb(0,0,0)‘,
},
containerStyle: {
flex: 1,
top: 0,
left: 0,
right: 0,
bottom: 0,
position: ‘absolute‘,
justifyContent: ‘center‘,
},
alertViewStyle: {
backgroundColor: ‘white‘,
borderRadius: 10,
height: 130,
marginLeft: 50,
marginRight: 50,
borderColor: ‘lightgrey‘,
},
titleContainerStyle: {
justifyContent: ‘center‘,
alignItems: ‘center‘,
marginLeft: 15,
marginRight: 15,
height: 30
},
titleStyle: {
fontSize: 18,
fontWeight: ‘900‘
},
contentContainerStyle: {
justifyContent: ‘center‘,
alignItems: ‘center‘,
height: 50
},
contentStyle: {
justifyContent: ‘center‘,
marginLeft: 20,
marginRight: 20,
fontSize: 14,
},
horizontalLineStyle: {
height: 0.5,
backgroundColor: ‘lightgrey‘
},
btnContainerStyle: {
flexDirection: ‘row‘,
width: width - 100,
height: 48
},
verticalLineStyle: {
height: 50,
backgroundColor: ‘lightgrey‘,
width: 0.5
},
btnStyle: {
flex: 1,
height: 47,
justifyContent: ‘center‘,
alignItems: ‘center‘
},
});
然後是測試的文件:
import React, {Component} from ‘react‘;
import {
View,
Text,
StyleSheet, Platform,
} from ‘react-native‘;
import RNAlertView from ‘./view/HRAlertView‘;
const instructions = Platform.select({
ios: ‘Press Cmd+R to reload,\n‘ + ‘Cmd+D or shake for dev menu‘,
android:
‘Double tap R on your keyboard to reload,\n‘ +
‘Shake or press menu button for dev menu‘,
});
export default class AlertDialogTest extends Component {
render() {
return (
<View style={styles.container}>
{this._renderAndroidAlert()}
<Text style={styles.instructions}>{instructions}</Text>
<Text style={styles.welcome} onPress={() => this._show()}>
點我->彈出框
</Text>
</View>
);
}
_renderAndroidAlert() {
return(
<RNAlertView ref=‘alert‘ conformName={‘確定‘} cancleName={‘取消‘}
alertTitle={‘刪除提示‘} alertContent={‘執行此操作後,將無法關註該聯系人,請確認‘}
comformClik={() => {
this._confirm()
}}
dissmissClick={() => {
this._cancel()
}}
/>
);
}
_show = () => {
this.refs.alert && this.refs.alert.showDialog();
}
_confirm = () => {
alert(‘點擊了確定‘)
};
_cancel = () => {
alert(‘點擊了取消‘)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#F5FCFF‘,
},
welcome: {
fontSize: 20,
textAlign: ‘center‘,
margin: 10,
},
instructions: {
textAlign: ‘center‘,
color: ‘#333333‘,
marginBottom: 5,
},
});
React Native自定義北京-賽車源碼出售彈出警告框