1.修改全局Toast

pages/components/Toast.js

@@ -7,12 +7,11 @@ class AddToast extends Component {
 	constructor(props) {
 		super(props);
 		this.state = {
-			fadeAnim: new Animated.Value(0),
-			modalVisible: false
+			fadeAnim: new Animated.Value(0)
 		};
 	}
 	componentDidMount() {
-		Animated.sequence([
+		this.anim = Animated.sequence([
 			// 使用宽松函数让数值随时间动起来。
 			Animated.timing(
 				// 随时间变化而执行动画
@@ -21,16 +20,17 @@ class AddToast extends Component {
 					toValue: 1, // 透明度最终变为1，即完全不透明
 					duration: 500 // 让动画持续一段时间
 				}
-			),
-			Animated.delay(4000),
-			Animated.timing(this.state.fadeAnim, {
-				toValue: 0,
-				duration: 200
-			})
-		]).start((res) => {
-			this.props.delete && this.props.delete(res);
-		});
+			)
+			// 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({
@@ -45,14 +45,15 @@ class AddToast extends Component {
 			<Animated.Text // 使用专门的可动画化的Text组件
 				style={{
 					opacity: opacity, // 将透明度指定为动画变量值
-					backgroundColor: 'rgba(0,0,0,0.7)',
+					backgroundColor: 'white',
 					borderRadius: 10,
-					color: '#FFF',
+					color: 'black',
 					marginTop: 5,
-					paddingBottom: 5,
-					paddingLeft: 15,
-					paddingTop: 5,
-					paddingRight: 15,
+					width: '70%',
+					textAlign: 'center',
+					textAlignVertical: 'center',
+					height: '15%',
+					fontSize: 22,
 					transform: [ { translateY: translateY } ]
 				}}
 			>
@@ -85,7 +86,7 @@ class ToastView extends Component {
 			toastList.push({
 				text: value,
 				value: (
-					<AddToast key={key} delete={_this.deleteToast}>
+					<AddToast key={key} delete={_this.deleteToast} visible={_this.state.modalVisible}>
 						{value}
 					</AddToast>
 				)
@@ -121,7 +122,7 @@ class ToastView extends Component {
 		return (
 			<ModalView
 				close={() => {
-					this.setState({ modalVisible: false });
+					this.setState(this.deleteToast());
 				}}
 				visible={this.state.modalVisible}
 				customerlayout={{ flex: 1, justifyContent: 'flex-end' }}

pages/utils/ModalUtil.js

@@ -59,7 +59,6 @@ export default class ModalView extends Component {
 			}
 		});
 	};
-
 	renderContent = () => this.props.contentView();
 
 	render() {