ReactNative如何实现Toast-创新互联
这篇文章将为大家详细讲解有关ReactNative如何实现Toast,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联长期为千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为魏县企业提供专业的成都做网站、网站制作、成都外贸网站建设,魏县网站改版等技术服务。拥有10余年丰富建站经验和众多成功案例,为您定制开发。定义组件
import React, {Component} from 'react'; import { StyleSheet, View, Easing, Dimensions, Text, Animated } from 'react-native'; import PropTypes from 'prop-types'; import Toast from "./index"; const {width, height} = Dimensions.get("window"); const viewHeight = 35; class ToastView extends Component { static propTypes = { message:PropTypes.string, }; dismissHandler = null; constructor(props) { super(props); this.state = { message: props.message !== undefined ? props.message : '' } } render() { return () } componentDidMount() { this.timingDismiss() } componentWillUnmount() { clearTimeout(this.dismissHandler) } timingDismiss = () => { this.dismissHandler = setTimeout(() => { this.onDismiss() }, 1000) }; onDismiss = () => { if (this.props.onDismiss) { this.props.onDismiss() } } } const styles = StyleSheet.create({ textContainer: { backgroundColor: 'rgba(0,0,0,.6)', borderRadius: 8, padding: 10, bottom:height/8, maxWidth: width / 2, alignSelf: "flex-end", }, defaultText: { color: "#FFF", fontSize: 15, }, container: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, flexDirection: "row", justifyContent: "center", } }); export default ToastView {this.state.message}
首先导入我们必须的基础组件以及API,我们自定义组件都需要继承它,Dimensions用于实现动画,Easing用于设置动画的轨迹运行效果,PropTypes用于对属性类型进行定义。
render方法是我们定义组件渲染的入口,最外层view使用position为absolute,并设置left,right,top,bottom设置为0,使其占满屏幕,这样使用Toast显示期间不让界面监听点击事件。内层View是Toast显示的黑框容器,backgroundColor属性设置rgba形式,颜色为黑色透明度为0.6。并设置圆角以及大宽度为屏幕宽度的一半。然后就是Text组件用于显示具体的提示信息。
我们还看到propTypes用于限定属性message的类型为string。constructor是我们组件的构造方法,有一个props参数,此参数为传递过来的一些属性。需要注意,构造方法中首先要调用super(props),否则报错,在此处,我将传递来的值设置到了state中。
对于Toast,显示一会儿自动消失,我们可以通过setTimeout实现这个效果,在componentDidMount调用此方法,此处设置时间为1000ms。然后将隐藏毁掉暴露出去。当我们使用setTimeout时还需要在组件卸载时清除定时器。组件卸载时回调的时componentWillUnmount。所以在此处清除定时器。
实现动画效果
在上面我们实现了Toast的效果,但是显示和隐藏都没有过度动画,略显生硬。那么我们加一些平移和透明度的动画,然后对componentDidMount修改实现动画效果
在组件中增加两个变量
moveAnim = new Animated.Value(height / 12); opacityAnim = new Animated.Value(0);
在之前内层view的样式中,设置的bottom是height/8。我们此处将view样式设置如下
style={[styles.textContainer, {bottom: this.moveAnim, opacity: this.opacityAnim}]}
然后修改componentDidMount
componentDidMount() { Animated.timing( this.moveAnim, { toValue: height / 8, duration: 80, easing: Easing.ease }, ).start(this.timingDismiss); Animated.timing( this.opacityAnim, { toValue: 1, duration: 100, easing: Easing.linear }, ).start(); }
也就是bottom显示时从height/12到height/8移动,时间是80ms,透明度从0到1转变执行时间100ms。在上面我们看到有个easing属性,该属性传的是动画执行的曲线速度,可以自己实现,在Easing API中已经有多种不同的效果。大家可以自己去看看实现,源码地址是 https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js ,自己实现的话直接给一个计算函数就可以,可以自己去看模仿。
定义显示时间
在前面我们设置Toast显示1000ms,我们对显示时间进行自定义,限定类型number,
time: PropTypes.number
在构造方法中对时间的处理
time: props.time && props.time < 1500 ? Toast.SHORT : Toast.LONG,
在此处我对时间显示处理为SHORT和LONG两种值了,当然你可以自己处理为想要的效果。
然后只需要修改timingDismiss中的时间1000,写为this.state.time就可以了。
组件更新
当组件已经存在时再次更新属性时,我们需要对此进行处理,更新state中的message和time,并清除定时器,重新定时。
componentWillReceiveProps(nextProps) { this.setState({ message: nextProps.message !== undefined ? nextProps.message : '', time: nextProps.time && nextProps.time < 1500 ? Toast.SHORT : Toast.LONG, }) clearTimeout(this.dismissHandler) this.timingDismiss() }
组件注册
为了我们的定义的组件以API的形式调用,而不是写在render方法中,所以我们定义一个跟组件
import React, {Component} from "react"; import {StyleSheet, AppRegistry, View, Text} from 'react-native'; viewRoot = null; class RootView extends Component { constructor(props) { super(props); console.log("constructor:setToast") viewRoot = this; this.state = { view: null, } } render() { console.log("RootView"); return ({this.state.view} ) } static setView = (view) => { //此处不能使用this.setState viewRoot.setState({view: view}) }; } const originRegister = AppRegistry.registerComponent; AppRegistry.registerComponent = (appKey, component) => { return originRegister(appKey, function () { const OriginAppComponent = component(); return class extends Component { render() { return (); }; }; }); }; const styles = StyleSheet.create({ container: { flex: 1, position: 'relative', }, rootView: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, flexDirection: "row", justifyContent: "center", } }); export default RootView
RootView就是我们定义的根组件,实现如上,通过AppRegistry.registerComponent注册。
包装供外部调用
import React, { Component, } from 'react'; import RootView from '../RootView' import ToastView from './ToastView' class Toast { static LONG = 2000; static SHORT = 1000; static show(msg) { RootView.setView({ RootView.setView() }}/>) } static show(msg, time) { RootView.setView( { RootView.setView() }}/>) } } export default Toast
Toast中定义两个static变量,表示显示的时间供外部使用。然后提供两个static方法,方法中调用RootView的setView方法将ToastView设置到根view。
使用
首先导入上面的Toast,然后通过下面方法调用
Toast.show("测试,我是Toast"); //能设置显示时间的Toast Toast.show("测试",Toast.LONG);
关于“ReactNative如何实现Toast”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页题目:ReactNative如何实现Toast-创新互联
文章URL:http://pwwzsj.com/article/dccidp.html