Comment implémenter Toast à l'aide de ReactNative

Cet article présente principalement l'exemple d'implémentation de Toast dans ReactNative. Maintenant, je le partage avec vous et le donne comme référence.

Pour les ingénieurs de développement Android, Toast est très familier. Il est utilisé pour afficher un message d'invite et le masquer automatiquement. Lorsque nous développons des applications RN, il nous est un peu difficile d'obtenir un tel effet, mais ce n'est pas difficile du tout. Cela nous demande simplement de nous adapter. RN fournit officiellement une API ToastAndroid. Vous devriez le deviner quand vous voyez le nom. Il ne peut être utilisé que sous Android et n'a aucun effet lorsqu'il est utilisé sous iOS. Par conséquent, nous devons en adapter ou en personnaliser un. L'article d'aujourd'hui consiste à personnaliser un Toast afin qu'il puisse fonctionner à la fois sur Android et iOS, et qu'il ait la même chose. effet opérationnel.

Portail de code source

Définir les composants

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=&#39;none&#39;>
        <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: &#39;rgba(0,0,0,.6)&#39;,
    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

Importez d'abord nos composants de base et notre API nécessaires, et tous nos composants personnalisés doivent en hériter , Les dimensions sont utilisées pour implémenter l'animation, Easing est utilisé pour définir l'effet de trajectoire de l'animation et PropTypes est utilisé pour définir les types d'attributs. La méthode

render nous permet de définir le rendu des composants. La vue la plus externe utilise la position comme absolue et définit la gauche, la droite, le haut et le bas sur 0 afin qu'elle remplisse l'écran de cette façon. il ne sera pas affiché pendant l'affichage de Toast. Laissez l'interface écouter les événements de clic. La vue interne est le conteneur de cadre noir affiché par Toast. L'attribut backgroundColor est défini au format rgba, la couleur est noire et la transparence est de 0,6. Et définissez les coins arrondis et la largeur maximale sur la moitié de la largeur de l'écran. Ensuite, le composant Texte est utilisé pour afficher des informations d'invite spécifiques.

Nous voyons également que propTypes est utilisé pour limiter le type de message d'attribut à une chaîne. Le constructeur est la méthode de construction de notre composant. Il a un paramètre props, qui contient certaines propriétés ignorées. Il convient de noter que super(props) doit être appelé en premier dans le constructeur, sinon une erreur sera signalée. Ici, je définis la valeur transmise dans l'état.

Pour Toast, l'affichage disparaîtra automatiquement après un certain temps. Nous pouvons obtenir cet effet via setTimeout Appelez cette méthode sur composantDidMount. Le temps défini ici est de 1000 ms. La destruction cachée est alors révélée. Lorsque nous utilisons setTimeout, nous devons également effacer le minuteur lorsque le composant est déchargé. composantWillUnmount est rappelé lorsque le composant est démonté. Alors effacez le minuteur ici.

Obtenir un effet d'animation

Nous avons implémenté l'effet Toast ci-dessus, mais l'affichage et le masquage ne sont pas trop animés, ce qui est légèrement rigide. Ensuite, nous ajoutons des animations de traduction et de transparence, puis modifions composantDidMount pour obtenir des effets d'animation

Ajoutez deux variables au composant

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

Dans le style précédent de la vue interne, définir le bas est hauteur/8. Ici, nous définissons le style d'affichage comme suit

style={[styles.textContainer, {bottom: this.moveAnim, opacity: this.opacityAnim}]}

puis modifions composantDidMount

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();
  }

, c'est-à-dire que lorsque le bas est affiché, il passe de la hauteur/12 à la hauteur/8 , le temps est de 80 ms et la transparence est de Le temps d'exécution de la transition 0 à 1 est de 100 ms. Ci-dessus, nous voyons qu'il existe un attribut d'accélération, qui transmet la vitesse d'exécution de l'animation. Vous pouvez l'implémenter vous-même. Il existe de nombreux effets différents dans l'API d'accélération. Vous pouvez vérifier l'implémentation vous-même. L'adresse du code source est https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js. donnez-lui une fonction de calcul. Vous pouvez le regarder et l'imiter vous-même.

Définissez le temps d'affichage

Plus tôt, nous avons réglé l'affichage de Toast à 1000 ms. Nous personnalisons le temps d'affichage et limitons le numéro de type,

time: PropTypes.number

Traitement du temps dans la méthode de construction

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

Ici, je traite l'affichage du temps en deux valeurs, COURT et LONG. Bien sûr, vous pouvez le traiter vous-même jusqu'à l'effet souhaité.

Ensuite, il vous suffit de modifier l'heure 1000 dans timingDismiss et de l'écrire sous la forme this.state.time.

Mise à jour du composant

Lorsque les propriétés sont à nouveau mises à jour alors que le composant existe déjà, nous devons le traiter, mettre à jour le message et l'heure dans l'état, et effacer le minuterie, Retime.

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()
  }

Enregistrement des composants

Pour que nos composants définis soient appelés sous forme d'API au lieu d'être écrits dans la méthode de rendu, nous définissons un composant de suivi

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: &#39;relative&#39;,
  },
  rootView: {
    position: "absolute",
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    flexDirection: "row",
    justifyContent: "center",
  }
});
export default RootView

RootView est le composant racine que nous avons défini. Il est implémenté comme ci-dessus et enregistré via AppRegistry.registerComponent.

Packaging pour les appels externes

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

Deux variables statiques sont définies dans Toast, indiquant que l'heure affichée est destinée à un usage externe. Fournissez ensuite deux méthodes statiques, dans lesquelles la méthode setView de RootView est appelée pour définir ToastView sur la vue racine.

Utilisez

pour importer d'abord le Toast ci-dessus, puis appelez-le via la méthode suivante

Toast.show("测试,我是Toast");
          //能设置显示时间的Toast
          Toast.show("测试",Toast.LONG);

Ce qui précède est ce pour quoi j'ai compilé tout le monde, j'espère qu'il sera utilisé à l'avenir. Utile à tout le monde.

Articles connexes :

Utiliser Webpack pour créer un échafaudage Vue

Comment utiliser Webpack pour empaqueter des fichiers

Introduction détaillée à la création de webpack

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!