Beispielfreigabe für die Implementierung von Toast in ReactNative

In diesem Artikel wird hauptsächlich das Beispiel der ReactNative-Implementierung von Toast vorgestellt. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Für Android-Entwicklungsingenieure ist Toast sehr vertraut. Es wird verwendet, um eine Eingabeaufforderung anzuzeigen und automatisch auszublenden. Wenn wir RN-Anwendungen entwickeln, ist es für uns etwas schwierig, einen solchen Effekt zu erzielen, aber es ist überhaupt nicht schwierig. Es ist lediglich erforderlich, dass RN offiziell eine ToastAndroid-API bereitstellt Es kann nur in Android verwendet werden und hat keine Auswirkungen, wenn es in iOS verwendet wird. Daher müssen wir einen Toast anpassen oder anpassen, damit er sowohl auf Android als auch auf iOS ausgeführt werden kann Betriebswirkung.

Quellcode-Portal

Komponenten definieren

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

Importieren Sie zunächst die Grundlagen, die wir benötigen Komponenten und APIs, unsere benutzerdefinierten Komponenten müssen es alle erben, um Animationen zu implementieren, Easing wird verwendet, um den Trajektorienlaufeffekt der Animation festzulegen, und PropTypes wird verwendet, um Eigenschaftstypen zu definieren. Die

render-Methode ist für uns der Einstieg in die Darstellung der Komponenten. Die äußerste Ansicht verwendet die Position als absolut und setzt links, rechts, oben und unten auf 0, sodass sie den Bildschirm ausfüllt. Es wird während der Toast-Anzeige nicht angezeigt. Die innere Ansicht ist der von Toast angezeigte schwarze Rahmencontainer. Das Attribut „backgroundColor“ ist im RGBA-Format festgelegt, die Farbe ist schwarz und die Transparenz beträgt 0,6. Und stellen Sie abgerundete Ecken und maximale Breite auf die halbe Bildschirmbreite ein. Anschließend wird die Textkomponente verwendet, um bestimmte Eingabeaufforderungsinformationen anzuzeigen.

Wir sehen auch, dass propTypes verwendet wird, um den Typ der Attributnachricht auf einen String zu beschränken. Der Konstruktor ist die Konstruktionsmethode unserer Komponente. Er verfügt über einen Requisitenparameter, bei dem es sich um einige übergebene Eigenschaften handelt. Es ist zu beachten, dass super(props) zuerst im Konstruktor aufgerufen werden muss, andernfalls wird ein Fehler gemeldet. Hier setze ich den übergebenen Wert in den Status.

Bei Toast verschwindet die Anzeige automatisch nach einer Weile. Wir können diesen Effekt durch Aufrufen dieser Methode auf ComponentDidMount erreichen. Dann kommt die verborgene Zerstörung ans Licht. Wenn wir setTimeout verwenden, müssen wir auch den Timer löschen, wenn die Komponente entladen wird. „componentWillUnmount“ wird zurückgerufen, wenn die Komponente ausgehängt wird. Löschen Sie hier also den Timer.

Animationseffekt erzielen

Wir haben den Toast-Effekt oben implementiert, aber das Anzeigen und Ausblenden ist nicht übermäßig animiert, was etwas steif ist. Dann fügen wir einige Übersetzungs- und Transparenzanimationen hinzu und ändern dann ComponentDidMount, um Animationseffekte zu erzielen

Fügen Sie der Komponente vorher zwei Variablen hinzu

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

Im Stil der Innenansicht, der untere Satz ist Höhe/8. Hier stellen wir den Ansichtsstil wie folgt ein:

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

und ändern dann „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();
  }

unten Die Anzeigezeit beträgt 80 ms beim Übergang von Höhe/12 zu Höhe/8 und die Ausführungszeit der Transparenzänderung von 0 auf 1 beträgt 100 ms. Oben sehen wir, dass es ein Easing-Attribut gibt, das die Kurvengeschwindigkeit der Animationsausführung übergibt. Es gibt viele verschiedene Effekte in der Easing-API. Sie können die Implementierung selbst überprüfen. Die Quellcodeadresse lautet https://github.com/facebook/react-native/blob/master/Libraries/Animated/src/Easing.js Geben Sie ihm eine Berechnungsfunktion. Sie können es selbst ansehen und nachahmen.

Definieren Sie die Anzeigezeit

Zuvor haben wir die Toast-Anzeige auf 1000 ms eingestellt. Wir passen die Anzeigezeit an und begrenzen die Typnummer,

time: PropTypes.number

Umgang mit der Zeit im Konstruktor

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

Hier verarbeite ich die Zeitanzeige als SHORT- und LONG-Werte Ja, natürlich Sie Sie können selbst damit umgehen, um den gewünschten Effekt zu erzielen.

Dann müssen Sie nur noch die Zeit 1000 in TimingDismiss ändern und als this.state.time schreiben.

Komponentenaktualisierung

Wenn die Eigenschaften erneut aktualisiert werden, wenn die Komponente bereits vorhanden ist, müssen wir dies verarbeiten, die Nachricht und die Zeit im Status aktualisieren und die löschen Timer, 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()
  }

Komponentenregistrierung

Damit unsere definierten Komponenten in Form einer API aufgerufen und nicht geschrieben werden können In der Render-Methode definieren wir also eine Follower-Komponente

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 ist die von uns definierte Root-Komponente. Die Implementierung ist wie oben und wird über AppRegistry.registerComponent registriert.

Verpackung für externe Anrufe

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

Zwei statische Variablen werden in Toast definiert, um die angezeigte Zeit für den externen Gebrauch darzustellen. Stellen Sie dann zwei statische Methoden bereit, bei denen die setView-Methode von RootView aufgerufen wird, um ToastView auf die Root-Ansicht festzulegen.

Verwenden Sie

, um zuerst den Toast oben zu importieren, und rufen Sie dann

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

wie folgt auf MethodeVerwandte Empfehlungen:

Verwenden Sie die Toastkomponente, um die Funktion zu realisieren, den Benutzer aufzufordern, die Eingabe des Benutzernamens oder Passworts zu vergessen

Detaillierte Erläuterung des Brauchs Toast-Implementierungsmethode des WeChat-Applets

Detaillierte Erläuterung der benutzerdefinierten Toast-Beispiele des WeChat-Miniprogramms

Das obige ist der detaillierte Inhalt vonBeispielfreigabe für die Implementierung von Toast in ReactNative. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!