1.添加全局Toast

pages/components/MainPage.js

@@ -30,6 +30,7 @@ import LibraryUrl from '../services/library';
 import { ScrollView } from 'react-native-gesture-handler';
 import commonutil from '../utils/commonutil';
 import http_user from '../services/user';
+import Toast from '../components/Toast';
 
 export default class MainPage extends BasePage {
 	constructor(props) {

pages/components/RootView.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import { StyleSheet, AppRegistry, View, Text } from 'react-native';
 import Loading from './Loading';
-// import Toast from './Toast';
+import Toast from './Toast';
 // import Popup from './Popup';
 const originRegister = AppRegistry.registerComponent;
 AppRegistry.registerComponent = (appKey, component) => {
@@ -15,7 +15,7 @@ AppRegistry.registerComponent = (appKey, component) => {
 						{/* 弹窗
 						<Popup /> */}
 						{/* 提示 */}
-						{/* <Toast /> */}
+						<Toast />
 						{/* //加载动画 */}
 						<Loading />
 					</View>

pages/components/Toast.js

@@ -0,0 +1,133 @@
+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),
+			modalVisible: false
+		};
+	}
+	componentDidMount() {
+		Animated.sequence([
+			// 使用宽松函数让数值随时间动起来。
+			Animated.timing(
+				// 随时间变化而执行动画
+				this.state.fadeAnim, // 动画中的变量值
+				{
+					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);
+		});
+	}
+	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: 'rgba(0,0,0,0.7)',
+					borderRadius: 10,
+					color: '#FFF',
+					marginTop: 5,
+					paddingBottom: 5,
+					paddingLeft: 15,
+					paddingTop: 5,
+					paddingRight: 15,
+					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}>
+						{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({ modalVisible: false });
+				}}
+				visible={this.state.modalVisible}
+				customerlayout={{ flex: 1, justifyContent: 'flex-end' }}
+				contentView={this.getView}
+			/>
+		);
+	}
+}
+export default ToastView;