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中。