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