ReactNative实现Toast的示例


Posted in Javascript onDecember 31, 2017

对于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 查看。文中若有不足或错误的地方欢迎指出。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。最后新年快乐。

Javascript 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
用jquery实现输入框获取焦点消失文字
Apr 27 Javascript
js 固定悬浮效果实现思路代码
Aug 02 Javascript
java与javascript之间json格式数据互转介绍
Oct 29 Javascript
BootStrap实现树形目录组件代码详解
Jun 21 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
jQuery查找dom的几种方法效率详解
May 17 jQuery
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
详解用JS添加和删除class类名
Mar 25 Javascript
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 jQuery
Vue axios获取token临时令牌封装案例
Sep 11 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 #Javascript
AngularJS基于MVC的复杂操作实例讲解
Dec 31 #Javascript
jQuery实现页码跳转式动态数据分页
Dec 31 #jQuery
React数据传递之组件内部通信的方法
Dec 31 #Javascript
javascript 通过键名获取键盘的keyCode方法
Dec 31 #Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
Dec 29 #Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
Dec 29 #Javascript
You might like
PHP加密扩展库Mcrypt安装和实例
2013/11/10 PHP
destoon常用的安全设置概述
2014/06/21 PHP
PHP实现操作redis的封装类完整实例
2015/11/14 PHP
在 Laravel 项目中使用 webpack-encore的方法
2019/07/21 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
javascipt基础内容--需要注意的细节
2013/04/10 Javascript
javascript实现json页面分页实例代码
2014/02/20 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
canvas 实现中国象棋
2017/02/17 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
原生js实现移动端Touch轮播图的方法步骤
2019/01/03 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
通过GASP让vue实现动态效果实例代码详解
2019/11/24 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
跟老齐学Python之dict()的操作方法
2014/09/24 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
python实现xlsx文件分析详解
2018/01/02 Python
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
python 限制函数执行时间,自己实现timeout的实例
2019/01/12 Python
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
信息服务专业毕业生求职信
2014/03/02 职场文书
市场拓展计划书
2014/05/03 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
安全生产月标语
2014/10/07 职场文书
党员民主评议个人总结
2014/10/20 职场文书
违纪检讨书范文
2015/01/27 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书