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

(0)

相关推荐

  • ReactNative页面跳转实例代码

    效果图如下所示: 进入工作目录,运行 react-native init NavigatorProject 创建项目NavigatorProject import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, TouchableHighlight, Image, Navigator } from 'react-native'; class navigatorProject exte

  • Windows下React Native的Android环境部署及布局示例

    搭建基础环境 JDK(必须,不解释) SDK(建议使用Android Studio,集成SDK以及模拟器) genymotion(如果是使用真机或者Android Studio自带的模拟器,可以选择不装) NVM(node版本控制器,需要node4.0以上版本) 以上配置不是必须,可自行选择适合自己的环境,部分安装过程可能会涉及到翻墙,需要配置代理 配置踩坑记录 genymotion 这里选择genymotion模拟器来讲解,也会提一下Android Studio自带的模拟器的一些注意点,使用真

  • React Native实现简单的登录功能(推荐)

    React Native 简介: React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验.React Native 把重点放在所有开发人员关心的平台的开发效率上

  • Android原生嵌入React Native详解

    1.首先集成的项目目录 我使用的是直接按照react-native init Project 的格式来导入的,也就是说,我的Android项目目录是跟node_modules是在一个目录下的. 我们init完项目之后,项目初始化完成了,这时候我们可以用命令react-native run-android直接运行项目,至于怎么调试,之前已经说过. 说一下我们怎么开发和运行分开吧,我们开发一般会选择webstrom,开发后我们会Android和ios的编译分开. 启动npm 下面说一下android

  • ReactNative (API)AsyncStorage存储详解及实例

    AsyncStorage存储类似Android中的sharedpreference存储或者IOS中的NSDefaultUser不过ReactNative中的AsyncStorage只能存储字符串类型 常用方法: getItem(key:string,callback?:?(error:?Error,result:?string)=>void) 静态方法,该通过key字段来进行查询存储的数据,把该结果值作为参数传入第二个callback方法.如果发生错误,会把Error对象传入callback方法

  • ReactNative之键盘Keyboard的弹出与消失示例

    在开发中经常遇到需要输入的地方,所以就学习了一下ReactNative键盘Keyboard的弹出与消失的方法,留个笔记. 今天我们来说下RN对键盘事件的支持. 在React-native 的Component组件中有个Keyboard. github地址如下:https://github.com/facebook/react-native/tree/770091f3c13f7c1bd77c50f979d89a774001fbf0/Libraries/Components/Keyboard 我们先

  • react-native 封装选择弹出框示例(试用ios&android)

    在开发 App 的时候,经常会使用到对话框(又叫消息框.提示框.告警框). 在web开发中经常会用得到.今天就来介绍了一下react-native 封装弹出框 之前看到react-native-image-picker中自带了一个选择器,可以选择拍照还是图库,但我们的项目中有多处用到这个选择弹出框,所以就自己写了一下,最最重要的是ios和Android通用.先上动态效果图~ 一.封装要点 1.使用动画实现弹框布局及显示隐藏效果 2.通过一个boolean值控制组件的显示隐藏 3.弹框选项数组通过

  • ReactNative-JS 调用原生方法实例代码

    第一步首先创建ReactNative 模块类继承ReactContextBaseJavaModule package com.mixture; import android.content.Context; import android.widget.Toast; import com.facebook.react.bridge.ReactApplicationContext; import com.facebook.react.bridge.ReactContextBaseJavaModule

  • ReactNative实现Toast的示例

    对于Android开发工程师来说,Toast在熟悉不过了,用它来显示一个提示信息,并自动隐藏.在我们开发RN应用的时候,我门也要实现这样的效果,就一点困难了,倒也不是困难,只是需要我们去适配,RN官方提供了一个API ToastAndroid,看到这个名字应该猜出,它只能在Android中使用,在iOS中使用没有效果,所以,我们需要适配或者我们自定义一个,今天的这篇文章就是自定义一个Toast使其在Android和iOS都能运行,并有相同的运行效果. 源码传送门 定义组件 import Reac

  • ios原生和react-native各种交互的示例代码

    需求:让一个表格视图中的cell能左滑删除,效果图如下: 目前RN中的ListView主要问题是复用,以及其他一些细节如索引视图.左滑删除.编辑等,要想在RN上自定义实现原生的这种效果尚有一定的问题,在必要时可以考虑使用原生的UITableView,数据从RN端传递 1.原生端编写表格控制器NativeTableViewController,暴露的属性如下 datas为表格数据源,另外一个为需要暴露给RN调用用方法. 2.框架只提供了暴露UIView给RN端的接口,所以需要制作一个中转UIVie

  • Android编程基础之简单Button事件响应综合提示控件Toast应用示例

    本文实例讲述了Android简单Button事件响应综合提示控件Toast应用.分享给大家供大家参考,具体如下: 前面讲述了在main.xml里定义了Button对象,这里我们来学习Button如何实现事件响应. Button按钮所触发的事件处理,我们称之为Event Handle,只不过在Android当中,按钮事件是由系统的Button.OnClickListener所控制,熟悉Java程序设计的读者对OnXxxListener应该不陌生.以下的Demo,我们将实现当点击Button时,Te

  • Angular 2使用路由自定义弹出组件toast操作示例

    本文实例讲述了Angular 2使用路由自定义弹出组件toast操作.分享给大家供大家参考,具体如下: 原理: 使用Angular2的命名路由插座,一个用来显示app正常的使用,一个用来显示弹出框, <router-outlet name='apps'></router-outlet> <router-outlet name='popup'></router-outlet> 浏览器的导航栏中则这样显示 http://127.0.0.1:4200/(popup

  • React Native 截屏组件的示例代码

    React Native 截屏组件:react-native-view-shot,可以截取当前屏幕或者按照当前页面的组件来选择截取,如当前页面有一个图片组件,一个View组件,可以选择截取图片组件或者View组件.支持iOS和安卓. 安装方法 npm install react-native-view-shot react-native link react-native-view-shot 使用示例 captureScreen() 截屏方法 截取当前屏幕,跟系统自带的截图一致,只会截取当前屏幕

  • react native带索引的城市列表组件的实例代码

    城市列表选择是很多app共有的功能,比如典型的美图app.那么对于React Native怎么实现呢? 要实现上面的效果,首先需要对界面的组成简单分析,界面的数据主要由当前城市,历史访问城市和热门城市组成,所以我们在提供Json数据的时候就需要将数据分为至少3部分. const ALL_CITY_LIST = DATA_JSON.allCityList; const HOT_CITY_LIST = DATA_JSON.hotCityList; const LAST_VISIT_CITY_LIST

  • vue教程之toast弹框全局调用示例详解

    本文实例为大家分享了vue toast弹框全局调用示例,供大家参考,具体内容如下 1.首选新建一个toast.vue模板文件: <template> <transition :name="fadeIn"> <div class="alertBox" v-show="show"> <div class="alert-mask" v-show="isShowMask"&

  • ReactNative实现图片上传功能的示例代码

    最近在学习ReactNative,ReactNative可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App,今天就学习一下ReactNative实现图片上传功能 在查看ReactNative的官方文档的时候,你会发现其实Fackbook是没有提供图片上传功能的. 如果我们的项目里需要使用图片上传(用js 实现图片上传),那我们有没有什么办法呢? 通过搜索React-native的github, 会发现里面有这么一篇文章:https://github

  • react-native 圆弧拖动进度条实现的示例代码

    本文介绍了react-native 圆弧拖动进度条实现的示例代码,分享给大家,具体如下: 先上效果图 因为需求需要实现这个效果图 非原生实现, 难点1:绘制 使用svg 难点2:点击事件的处理 难点3:封装 由于绘制需要是使用svg 此处自行百度 按照svg以及api 教学 视图代码块 render() { return ( <View pointerEvents={'box-only'} //事件处理 {...this._panResponder.panHandlers}> //实际圆环 {

  • react-native 实现购物车滑动删除效果的示例代码

    购物车的功能基本上电商项目都会有的,这是一篇关于react-native的,原生android的已经好久没写了.记得以前写原生购物车的时候,遇到过产品的灵魂质问,为啥iOS的滑动删除可以,android却那么难实现的.这个时候,我就打开微信说,android的微信版也是长按进行操作,iOS的是滑动操作的,两个平台自带的系统交互操作是不一样的.当然,最后还是默默的找各种三方库去进行滑动删除. rn的项目也是找的网上的一个三方库进行列表滑动操作的,github地址react-native-swipe

随机推荐