Exemple de partage d'implémentation de Toast dans ReactNative

Cet article présente principalement l'exemple de ReactNative implémentant Toast. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

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

Importer d'abord les bases dont nous avons besoin Composants et API, nos composants personnalisés doivent tous 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 de propriétés. 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 un 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, j'ai défini la valeur transmise sur 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 ComponentDidMount. Le temps de réglage 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);

avant Dans le style de la vue intérieure, l'ensemble inférieur est en 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();
  }

qui est bottom Le temps d'affichage est de 80 ms lors du passage de la hauteur/12 à la hauteur/8, et le temps d'exécution du changement de transparence de 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 vous regarder et vous imiter.

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

Gestion du temps dans le constructeur

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

Ici je traite l'affichage du temps comme des valeurs SHORT et LONG Oui, bien sûr vous pouvez le gérer vous-même pour obtenir 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, plutôt qu'écrits dans la méthode de rendu, nous définissons donc un composant suiveur

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. L'implémentation est comme ci-dessus et est enregistrée 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 pour représenter l'heure affichée pour une utilisation 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

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

via ce qui suit méthodeRecommandations associées :

Utilisez le composant toast pour réaliser la fonction d'inviter l'utilisateur à oublier de saisir le nom d'utilisateur ou le mot de passe

Explication détaillée de la personnalisation méthode d'implémentation toast de l'applet WeChat

Explication détaillée des exemples de toasts personnalisés du mini programme WeChat

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!