版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/danfengw/article/details/80778029
1、ToastView
根据属性type来设置不同的Toast的样式
import React, {Component} from 'react';
import {
StyleSheet
} from 'react-native';
import px2dp from "../utils/Px2Dp";
import Toast, {DURATION} from 'react-native-easy-toast';
import PropTypes from 'prop-types';
export default class ToastView extends Component<Props> {
static defaultProps = {
type: 'android'
};
static propTypes = {
type: PropTypes.oneOf(['android', 'ios']).isRequired,
};
constructor(props) {
super(props);
this.state = {
style: '',
}
}
setStyle = (type) => {
if ('ios' === type) {
return styles.bg_ios;
} else if ('android' === type) {
return styles.bg_android;
}
}
setFontStyle = (type) => {
if ('ios' === type) {
return styles.fontsize_ios;
} else if ('android' === type) {
return styles.fontsize_android;
}
}
show = (text) => {
this.refs.toast.show(text)
};
show = (text, duration) => {
this.refs.toast.show(text, duration)
};
render() {
const {type} = this.props;
return (
<Toast ref="toast"
style={this.setStyle(type)}
position={'center'}
textStyle={this.setFontStyle(type)}
/>
);
}
}
const styles = StyleSheet.create({
bg_android: {
backgroundColor: '#000000CC',
alignItems: 'center',
justifyContent: 'center',
},
bg_ios: {
backgroundColor: 'white', width: px2dp(606), height: px2dp(102),
alignItems: 'center',
justifyContent: 'center',
borderRadius: px2dp(8), shadowColor: 'black',
shadowOpacity: 0.13,
shadowRadius: px2dp(16),
shadowOffset: {
width: 0,
height: 0,
},
elevation: 0
},
fontsize_android: {
color: 'white',
fontSize: px2dp(30),
fontFamily: 'PingFangSC-Medium',opacity: 0.8,
},
fontsize_ios:{
color: '#3D3D3D',
fontSize: px2dp(30),
fontFamily: 'PingFangSC-Medium', opacity: 0.8,
}
});
2、使用
在render()方法的return的View中添加
<ToastView
ref='toast'
type={Platform.OS}
/>
弹出
this.refs.toast.show("密码修改失败,请重试!");