ReactNative实现Toast的示例
对于android开发工程师来说,toast在熟悉不过了,用它来显示一个提示信息,并自动隐藏。在我们开发rn应用的时候,我门也要实现这样的效果,就一点困难了,倒也不是困难,只是需要我们去适配,rn官方提供了一个api toastandroid,看到这个名字应该猜出,它只能在android中使用,在ios中使用没有效果,所以,我们需要适配或者我们自定义一个,今天的这篇文章就是自定义一个toast使其在android和ios都能运行,并有相同的运行效果。
定义组件
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 ( <view style={styles.container} pointerevents='none'> <animated.view style={[styles.textcontainer]}><text style={styles.defaulttext}>{this.state.message}</text></animated.view> </view> ) } 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
首先导入我们必须的基础组件以及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 (<view style={styles.rootview} pointerevents="box-none"> {this.state.view} </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 ( <view style={styles.container}> <originappcomponent/> <rootview/> </view> ); }; }; }); }; 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(<toastview message={msg} ondismiss={() => { rootview.setview() }}/>) } static show(msg, time) { rootview.setview(<toastview message={msg} time={time} ondismiss={() => { rootview.setview() }}/>) } } export default toast
toast中定义两个static变量,表示显示的时间供外部使用。然后提供两个static方法,方法中调用rootview的setview方法将toastview设置到根view。
使用
首先导入上面的toast,然后通过下面方法调用
toast.show("测试,我是toast"); //能设置显示时间的toast toast.show("测试",toast.long);
好了文章介绍完毕。如果想看完整代码,可以进我 github 查看。文中若有不足或错误的地方欢迎指出。希望对大家的学习有所帮助,也希望大家多多支持。最后新年快乐。
下一篇: 请注意入侵过程中的细节(三)(图)