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 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
JS控制弹出新页面窗口位置和大小的方法
Mar 02 Javascript
实现音乐播放器的代码(html5+css3+jquery)
Aug 04 Javascript
js创建对象的方法汇总
Jan 07 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
Jun 02 Javascript
JS命令模式例子之菜单程序
Oct 10 Javascript
使用iView Upload 组件实现手动上传图片的示例代码
Oct 01 Javascript
微信小程序在text文本实现多种字体样式
Nov 08 Javascript
node实现mock-plugin中间件的方法
Dec 25 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
Symfony2安装的方法(2种方法)
2016/02/04 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
JS 页面自动加载函数(兼容多浏览器)
2009/05/18 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JavaScript栏目列表隐藏/显示简单实现
2013/04/03 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
JS清除选择内容的方法
2015/01/29 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
javascript模拟评分控件实现方法
2015/05/13 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
2017/04/11 jQuery
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
JS选取DOM元素常见操作方法实例分析
2018/12/10 Javascript
JavaScript实现简单的计算器
2020/01/16 Javascript
用实例说明python的*args和**kwargs用法
2013/11/01 Python
新手常见6种的python报错及解决方法
2018/03/09 Python
python 编码规范整理
2018/05/05 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
python词云库wordCloud使用方法详解(解决中文乱码)
2020/02/17 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
struct与class的区别
2014/02/03 面试题
2014年售后服务工作总结
2014/11/18 职场文书
2015年重阳节主持词
2015/07/04 职场文书
2015党建工作简报
2015/07/21 职场文书
初二英语教学反思
2016/02/15 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
python开发的自动化运维工具ansible详解
2021/08/07 Python