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("密码修改失败,请重试!");