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),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',}
});
2、使用
<ToastView
ref='toast'
type={(Platform.OS === 'ios' ? 'ios' : 'android')}
/>
弹出
this.refs.toast.show("密码修改失败,请重试!");