react-native 自定义Toast

引入

import ToastTwo from '../util/ToastTwo';

使用

//true:成功的toast ，false:失败的toast
ToastTwo.add("********"，true)

ToastTwo.js 代码

import React, {Component,
} from 'react';import {StyleSheet,Image,ImageBackground,View,Easing,Dimensions,Text,Animated
} from 'react-native';
import zero from "./zero"
const { width, height } = Dimensions.get('window')
class AddToast extends Component {constructor(props) {super(props);this.state = {fadeAnim: new Animated.Value(0),top:false,}}componentDidMount() {Animated.sequence([// 使用宽松函数让数值随时间动起来。Animated.timing(                  // 随时间变化而执行动画this.state.fadeAnim,            // 动画中的变量值{toValue: 1,                   // 透明度最终变为1，即完全不透明duration: 500,              // 让动画持续一段时间useNativeDriver:true}),Animated.delay(3000),Animated.timing(this.state.fadeAnim,{toValue: 0,duration: 500,useNativeDriver:true})]).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 ({opacity: opacity,         // 将透明度指定为动画变量值backgroundColor: "#fff",borderRadius:zero.yHeight(23),shadowColor: "black",shadowOffset: {width: 20,height: 15},shadowOpacity:0.8,shadowRadius:6,alignItems:'center',width:zero.yWidth(636),flexDirection:'row',borderWidth:zero.yWidth(2),borderColor:"red",transform: [{ translateY: translateY },],}}>{width:zero.yWidth(46),height:zero.yHeight(46), borderRadius:zero.yHeight(23),backgroundColor:"#fff",justifyContent:'center',alignItems:'center'}}>{height:zero.yHeight(39)}}>{height:zero.yHeight(46),flex:1,justifyContent:"center",alignItems:'center',}}>  {color:'#EC5353',fontSize:zero.yFont(25)}}>{this.props.children})}
}
class AddToastSuccess extends Component {constructor(props) {super(props);this.state = {fadeAnim: new Animated.Value(0),top:false,}}componentDidMount() {Animated.sequence([// 使用宽松函数让数值随时间动起来。Animated.timing(                  // 随时间变化而执行动画this.state.fadeAnim,            // 动画中的变量值{toValue: 1,                   // 透明度最终变为1，即完全不透明duration: 500,              // 让动画持续一段时间useNativeDriver:true}),Animated.delay(3000),Animated.timing(this.state.fadeAnim,{toValue: 0,duration: 500,useNativeDriver:true})]).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 ({opacity: opacity,         // 将透明度指定为动画变量值backgroundColor: "#fff",borderRadius:zero.yHeight(23),shadowColor: "black",shadowOffset: {width: 20,height: 15},shadowOpacity:0.8,shadowRadius:6,alignItems:'center',borderWidth:zero.yWidth(2),borderColor:"#52C41A",width:zero.yWidth(636),flexDirection:'row',transform: [{ translateY: translateY },],}}>{width:zero.yWidth(46),height:zero.yHeight(46), borderRadius:zero.yHeight(23),backgroundColor:"#fff",justifyContent:'center',alignItems:'center'}}>{height:zero.yHeight(39)}}>{height:zero.yHeight(46),flex:1,justifyContent:"center",alignItems:'center'}}>  {color:'#00AF1D',fontSize:zero.yFont(25)}}>{this.props.children})}
}
let _this;
let key = 0;
class ToastView extends Component {constructor(props) {super(props);_this = this;this.state = {toastList: []}this.deleteToast = this.deleteToast.bind(this);}static add = (that,value,top) => {var toastList = _this.state.toastList;var toastAddState = true;if(top){_this.setState({top:true})}else{_this.setState({top:false})}toastList.forEach((item, index) => {if (item.text === value) {toastAddState = false;}});if(top){if (toastAddState) {toastList.push({text: value,value: {value}});key++;_this.setState({ toastList: toastList })}}else{if (toastAddState) {toastList.push({text: value,value: {value}});key++;_this.setState({ toastList: toastList })}}};deleteToast() {var toastList = this.state.toastList;toastList.splice(0, 1);this.setState({ toastList: toastList })}render() {return ({position: "absolute",left: 0,bottom: 50,width: width,justifyContent: "center",alignItems: "center",zIndex:9999999999}}>{this.state.toastList.map((item, index) => {return item.value;})})}
}
export default ToastView;

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！