DDR爱好者之家

ReactNative实现Toast的示例
站长资源 2024/11/26 佚名
69 1538
DDR爱好者之家 Design By 杰米

对于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 "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 "htmlcode">



componentWillReceiveProps(nextProps) {
   this.setState({
      message: nextProps.message !== undefined "htmlcode">



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 查看。文中若有不足或错误的地方欢迎指出。希望对大家的学习有所帮助，也希望大家多多支持。最后新年快乐。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米