1、ToastView

根据属性type来设置不同的Toast的样式

@H_502_4@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、使用

在render()方法的return的View中添加

@H_502_4@<ToastView ref='toast' type={(Platform.OS === 'ios' ? 'ios' : 'android')} />

弹出

@H_502_4@this.refs.toast.show("密码修改失败，请重试！"); 原文链接：https://www.f2er.com/react/301422.html