這篇文章將為大家詳細(xì)講解有關(guān)ReactNative如何實現(xiàn)Toast，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為魏縣企業(yè)提供專業(yè)的成都做網(wǎng)站、網(wǎng)站制作、成都外貿(mào)網(wǎng)站建設(shè)，魏縣網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

定義組件

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

首先導(dǎo)入我們必須的基礎(chǔ)組件以及API，我們自定義組件都需要繼承它，Dimensions用于實現(xiàn)動畫，Easing用于設(shè)置動畫的軌跡運(yùn)行效果，PropTypes用于對屬性類型進(jìn)行定義。

render方法是我們定義組件渲染的入口，最外層view使用position為absolute，并設(shè)置left,right,top,bottom設(shè)置為0，使其占滿屏幕，這樣使用Toast顯示期間不讓界面監(jiān)聽點(diǎn)擊事件。內(nèi)層View是Toast顯示的黑框容器，backgroundColor屬性設(shè)置rgba形式，顏色為黑色透明度為0.6。并設(shè)置圓角以及大寬度為屏幕寬度的一半。然后就是Text組件用于顯示具體的提示信息。

我們還看到propTypes用于限定屬性message的類型為string。constructor是我們組件的構(gòu)造方法，有一個props參數(shù)，此參數(shù)為傳遞過來的一些屬性。需要注意，構(gòu)造方法中首先要調(diào)用super(props),否則報錯，在此處，我將傳遞來的值設(shè)置到了state中。

對于Toast，顯示一會兒自動消失，我們可以通過setTimeout實現(xiàn)這個效果，在componentDidMount調(diào)用此方法，此處設(shè)置時間為1000ms。然后將隱藏毀掉暴露出去。當(dāng)我們使用setTimeout時還需要在組件卸載時清除定時器。組件卸載時回調(diào)的時componentWillUnmount。所以在此處清除定時器。

實現(xiàn)動畫效果

在上面我們實現(xiàn)了Toast的效果，但是顯示和隱藏都沒有過度動畫，略顯生硬。那么我們加一些平移和透明度的動畫，然后對componentDidMount修改實現(xiàn)動畫效果

在組件中增加兩個變量

moveAnim = new Animated.Value(height / 12);
  opacityAnim = new Animated.Value(0);

在之前內(nèi)層view的樣式中，設(shè)置的bottom是height/8。我們此處將view樣式設(shè)置如下

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轉(zhuǎn)變執(zhí)行時間100ms。在上面我們看到有個easing屬性，該屬性傳的是動畫執(zhí)行的曲線速度，可以自己實現(xiàn)，在Easing API中已經(jīng)有多種不同的效果。大家可以自己去看看實現(xiàn)，源碼地址是 https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js ，自己實現(xiàn)的話直接給一個計算函數(shù)就可以，可以自己去看模仿。

定義顯示時間

在前面我們設(shè)置Toast顯示1000ms，我們對顯示時間進(jìn)行自定義，限定類型number,

time: PropTypes.number

在構(gòu)造方法中對時間的處理

time: props.time && props.time < 1500 ? Toast.SHORT : Toast.LONG,

在此處我對時間顯示處理為SHORT和LONG兩種值了，當(dāng)然你可以自己處理為想要的效果。

然后只需要修改timingDismiss中的時間1000，寫為this.state.time就可以了。

組件更新

當(dāng)組件已經(jīng)存在時再次更新屬性時，我們需要對此進(jìn)行處理，更新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的形式調(diào)用，而不是寫在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就是我們定義的根組件，實現(xiàn)如上，通過AppRegistry.registerComponent注冊。

包裝供外部調(diào)用

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方法，方法中調(diào)用RootView的setView方法將ToastView設(shè)置到根view。

使用

首先導(dǎo)入上面的Toast，然后通過下面方法調(diào)用

Toast.show("測試,我是Toast");
          //能設(shè)置顯示時間的Toast
          Toast.show("測試",Toast.LONG);

關(guān)于“ReactNative如何實現(xiàn)Toast”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點(diǎn)與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

分享文章：ReactNative如何實現(xiàn)Toast-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://www.chinadenli.net/article18/dccidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、網(wǎng)站改版、全網(wǎng)營銷推廣、靜態(tài)網(wǎng)站、電子商務(wù)、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)