利用Modal 自定义类似MBProgressHUD组件
WechatIMG122.jpeg
1. 效果如下
2018-11-29 10_13_08.gif
2.用法
var MessageToast = require('../../MainPage/Tool/MessageToast');
render(){
return (
this.onPress('Success')} />
this.onPress('Fail')} />
this.onPress('Toast')} />
this.onPress('Loading')} />
);
}
onPress(event){
if(event=='Success'){
this.refs.toast.showSuccess('获取接口成功');
}
else if(event=='Fail'){
this.refs.toast.showFail('获取接口失败');
}
else if(event=='Toast'){
this.refs.toast.showMessage('哇哈哈哈哈哈哈哈哈哈哈哈哈哈哈哇哈哈哈哈哈哈哈哈哈哈哈哈哈哈');
}
else if(event=='Loading'){
this.refs.toast.showLoading('加载中...',2000);
}
}
3.MessageToast的代码
var React = require('react-native');
var {
Component,
StyleSheet,
Dimensions,
View,
Text,
Modal,
Image,
ActivityIndicatorIOS,
} = React;
var screenWidth = Dimensions.get('window').width;
var screenHeight = Dimensions.get('window').height;
var MHPluginSDK = require('NativeModules').MHPluginSDK;
var TostType = {Success:0,Fail:1,Message:2,Loading:3};
var SuccessImage = MHPluginSDK.basePath +'NewImage/Toast_success.png';
var InfoImage = MHPluginSDK.basePath +'NewImage/Toast_info.png';
var ErrorImage = MHPluginSDK.basePath +'NewImage/Toast_error.png';
class MessageToast extends React.Component{
constructor(props) {
super(props);
var defaultTimer= (this.props.defaultTimer)?(this.props.defaultTimer):(1200);
var loadingTimer= (this.props.loadingTimer)?(this.props.loadingTimer):(10000);
this.state={
isShowMessage:false, /*是否显示弹窗*/
toastType:TostType.Message, /*弹窗类型*/
showMessage:undefined, /*消息内容*/
defaultTimer:defaultTimer, /*默认弹窗显示时间*/
loadingTimer:loadingTimer, /*默认loading显示时间*/
};
}
render(){
return(
this.setState({modalVisible:false})} >
{this.show_Content(this.state.toastType)}
);
}
show_Content(toastType){
if(toastType==TostType.Loading){
return (
loading.....
);
}
else if(toastType==TostType.Success){
return (
{this.state.showMessage}
);
}
else if(toastType==TostType.Fail){
return (
{this.state.showMessage}
);
}
else{
return (
{this.state.showMessage}
);
}
}
/* 显示loading 效果弹窗 */
showLoading(message,timer){
if(typeof(timer)=='string'){ timer = parseInt(timer);}
if(timer ==undefined){ timer = this.state.loadingTimer;}
this.loading_TostWithTimer(message,TostType.Loading,timer);
}
/* 显示成功弹窗 */
showSuccess(message){
this.showMessage(message,TostType.Success);
}
/* 显示失败弹窗 */
showFail(message){
this.showMessage(message,TostType.Fail);
}
/* 显示不带图片的弹窗 */
showMessage(message,type){
if((message ==undefined) ||(message ==null)){ return;}
if(message.length<6){ /* 过短-加宽处理*/
message = ' '+message+' ';
}
this.default_ToastWithTimer(message,type);
}
/* 销毁显示的Toast*/
disMiss(){
this.setState({showMessage:null,isShowMessage:false,toastTimer:TostType.Message})
}
/* ---------------------------------------------------------------------------------*/
default_ToastWithTimer(message,type,showTimer){
var self = this;
this.toastTimer = setTimeout(
() => {
self.setState({showMessage:message,isShowMessage:true,toastType:type})
},
0
);
this.toastTimer = setTimeout(
() => {
self.setState({showMessage:'',isShowMessage:false,toastType:TostType.Message})
},
this.state.defaultTimer
);
}
loading_TostWithTimer(message,type,showTimer){
var self = this;
this.toastTimer = setTimeout(
() => {
self.setState({showMessage:message,isShowMessage:true,toastType:type})
},
0
);
this.toastTimer = setTimeout(
() => {
self.setState({showMessage:'',isShowMessage:false,toastType:TostType.Message})
},
showTimer
);
}
}
var styles = StyleSheet.create({
containerAll:{
flex:1,
flexDirection:'column',
width:screenWidth,
height:screenHeight,
},
LoadingView:{
width:screenWidth,
height:screenHeight/3,
marginTop:screenHeight*(1/3),
justifyContent:'center',
alignItems:'center',
alignSelf:'center',
},
SuccessView:{
width:screenWidth,
height:screenHeight/3,
marginTop:screenHeight*(1/3),
marginBottom:0,
justifyContent:'center',
alignItems:'center',
alignSelf:'center',
},
ErrorView:{
width:screenWidth,
height:screenHeight/3,
marginTop:screenHeight*(1/3),
marginBottom:0,
justifyContent:'center',
alignItems:'center',
alignSelf:'center',
},
MessageView:{
width:screenWidth,
height:screenHeight/3,
marginTop:screenHeight*(2/3),
marginBottom:0,
justifyContent:'center',
alignItems:'center',
alignSelf:'center',
},
MessageContentView:{
alignItems:'center',
alignSelf:'center',
padding:10,
backgroundColor:'#25292e',
borderRadius:3,
},
MessageText:{
color:'#ffffff',
textAlign:'center',
fontSize:15,
marginTop:5,
},
});
module.exports = MessageToast;
var React = require('react-native');
var {
Component,
StyleSheet,
Dimensions,
View,
Text,
Modal,
Image,
ActivityIndicatorIOS,
} = React;
var screenWidth = Dimensions.get('window').width;
var screenHeight = Dimensions.get('window').height;
var MHPluginSDK = require('NativeModules').MHPluginSDK;
var TostType = {Success:0,Fail:1,Message:2,Loading:3};
var SuccessImage = MHPluginSDK.basePath +'NewImage/Toast_success.png';
var InfoImage = MHPluginSDK.basePath +'NewImage/Toast_info.png';
var ErrorImage = MHPluginSDK.basePath +'NewImage/Toast_error.png';
class MessageToast extends React.Component{
constructor(props) {
super(props);
var defaultTimer= (this.props.defaultTimer)?(this.props.defaultTimer):(1200);
var loadingTimer= (this.props.loadingTimer)?(this.props.loadingTimer):(10000);
this.state={
isShowMessage:false, /*是否显示弹窗*/
toastType:TostType.Message, /*弹窗类型*/
showMessage:undefined, /*消息内容*/
defaultTimer:defaultTimer, /*默认弹窗显示时间*/
loadingTimer:loadingTimer, /*默认loading显示时间*/
};
}
render(){
return(
this.setState({modalVisible:false})} >
{this.show_Content(this.state.toastType)}
);
}
show_Content(toastType){
if(toastType==TostType.Loading){
return (
loading.....
);
}
else if(toastType==TostType.Success){
return (
{this.state.showMessage}
);
}
else if(toastType==TostType.Fail){
return (
{this.state.showMessage}
);
}
else{
return (
{this.state.showMessage}
);
}
}
/* 显示loading 效果弹窗 */
showLoading(message,timer){
if(typeof(timer)=='string'){ timer = parseInt(timer);}
if(timer ==undefined){ timer = this.state.loadingTimer;}
this.loading_TostWithTimer(message,TostType.Loading,timer);
}
/* 显示成功弹窗 */
showSuccess(message){
this.showMessage(message,TostType.Success);
}
/* 显示失败弹窗 */
showFail(message){
this.showMessage(message,TostType.Fail);
}
/* 显示不带图片的弹窗 */
showMessage(message,type){
if((message ==undefined) ||(message ==null)){ return;}
if(message.length<6){ /* 过短-加宽处理*/
message = ' '+message+' ';
}
this.default_ToastWithTimer(message,type);
}
/* 销毁显示的Toast*/
disMiss(){
this.setState({showMessage:null,isShowMessage:false,toastTimer:TostType.Message})
}
/* ---------------------------------------------------------------------------------*/
default_ToastWithTimer(message,type,showTimer){
var self = this;
this.toastTimer = setTimeout(
() => {
self.setState({showMessage:message,isShowMessage:true,toastType:type})
},
0
);
this.toastTimer = setTimeout(
() => {
self.setState({showMessage:'',isShowMessage:false,toastType:TostType.Message})
},
this.state.defaultTimer
);
}
loading_TostWithTimer(message,type,showTimer){
var self = this;
this.toastTimer = setTimeout(
() => {
self.setState({showMessage:message,isShowMessage:true,toastType:type})
},
0
);
this.toastTimer = setTimeout(
() => {
self.setState({showMessage:'',isShowMessage:false,toastType:TostType.Message})
},
showTimer
);
}
}
var styles = StyleSheet.create({
containerAll:{
flex:1,
flexDirection:'column',
width:screenWidth,
height:screenHeight,
},
LoadingView:{
width:screenWidth,
height:screenHeight/3,
marginTop:screenHeight*(1/3),
justifyContent:'center',
alignItems:'center',
alignSelf:'center',
},
SuccessView:{
width:screenWidth,
height:screenHeight/3,
marginTop:screenHeight*(1/3),
marginBottom:0,
justifyContent:'center',
alignItems:'center',
alignSelf:'center',
},
ErrorView:{
width:screenWidth,
height:screenHeight/3,
marginTop:screenHeight*(1/3),
marginBottom:0,
justifyContent:'center',
alignItems:'center',
alignSelf:'center',
},
MessageView:{
width:screenWidth,
height:screenHeight/3,
marginTop:screenHeight*(2/3),
marginBottom:0,
justifyContent:'center',
alignItems:'center',
alignSelf:'center',
},
MessageContentView:{
alignItems:'center',
alignSelf:'center',
padding:10,
backgroundColor:'#25292e',
borderRadius:3,
},
MessageText:{
color:'#ffffff',
textAlign:'center',
fontSize:15,
marginTop:5,
},
});
module.exports = MessageToast;