efunbox-mobile-8/pages/components/Toast.js

import React, { Component } from 'react';

import { StyleSheet, View, Easing, Dimensions, Text, Animated } from 'react-native';
import ModalView from '../utils/ModalUtil';
const { width, height } = Dimensions.get('window');
class AddToast extends Component {
	constructor(props) {
		super(props);
		this.state = {
			fadeAnim: new Animated.Value(0)
		};
	}
	componentDidMount() {
		this.anim = Animated.sequence([
			// 使用宽松函数让数值随时间动起来。
			Animated.timing(
				// 随时间变化而执行动画
				this.state.fadeAnim, // 动画中的变量值
				{
					toValue: 1, // 透明度最终变为1，即完全不透明
					duration: 500 // 让动画持续一段时间
				}
			)
			// Animated.delay(4000),
		]).start();
		this.anim_timeout = setTimeout(() => {
			this.props.delete();
		}, 3000);
	}
	componentWillUnmount() {
		clearTimeout(this.anim_timeout);
	}

	render() {
		let { fadeAnim } = this.state;
		const opacity = fadeAnim.interpolate({
			inputRange: [ 0, 1 ],
			outputRange: [ 0, 1 ]
		});
		const translateY = fadeAnim.interpolate({
			inputRange: [ 0, 1 ],
			outputRange: [ 20, 0 ]
		});
		return (
			<Animated.Text // 使用专门的可动画化的Text组件
				style={{
					opacity: opacity, // 将透明度指定为动画变量值
					backgroundColor: 'white',
					borderRadius: 10,
					color: 'black',
					marginTop: 5,
					width: '70%',
					textAlign: 'center',
					textAlignVertical: 'center',
					height: '15%',
					fontSize: 22,
					transform: [ { translateY: translateY } ]
				}}
			>
				{this.props.children}
			</Animated.Text>
		);
	}
}
let _this;
let key = 0;
class ToastView extends Component {
	constructor(props) {
		super(props);
		_this = this;
		this.state = {
			toastList: [],
			modalVisible: false
		};
		this.deleteToast = this.deleteToast.bind(this);
	}
	static add = (value) => {
		var toastList = _this.state.toastList;
		var toastAddState = true;
		toastList.forEach((item, index) => {
			if (item.text === value) {
				toastAddState = false;
			}
		});
		if (toastAddState) {
			toastList.push({
				text: value,
				value: (
					<AddToast key={key} delete={_this.deleteToast} visible={_this.state.modalVisible}>
						{value}
					</AddToast>
				)
			});
			key++;
			_this.setState({ toastList: toastList, modalVisible: true });
		}
	};
	deleteToast() {
		var toastList = this.state.toastList;
		toastList.splice(0, 1);
		this.setState({ toastList: toastList, modalVisible: false });
	}

	getView = () => {
		return (
			<View
				style={{
					position: 'absolute',
					height: '100%',
					width: '100%',
					justifyContent: 'center',
					alignItems: 'center'
				}}
			>
				{this.state.toastList.map((item, index) => {
					return item.value;
				})}
			</View>
		);
	};
	render() {
		return (
			<ModalView
				close={() => {
					this.setState(this.deleteToast());
				}}
				visible={this.state.modalVisible}
				customerlayout={{ flex: 1, justifyContent: 'flex-end' }}
				contentView={this.getView}
			/>
		);
	}
}
export default ToastView;