So implementieren Sie Toast mit ReactNative

In diesem Artikel wird hauptsächlich das Beispiel der Implementierung von Toast in ReactNative vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

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 unsere erforderlichen Grundkomponenten und APIs. Unsere benutzerdefinierten Komponenten müssen diese erben. Abmessungen Früher Implementieren Sie die Animation, 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 ein von Toast angezeigter schwarzer Rahmencontainer. Das Attribut „backgroundColor“ ist auf das RGBA-Format eingestellt, 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 auf 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 zwei Variablen in der Komponente hinzu

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

Im vorherigen Stil der Innenansicht ist der untere Satz die Höhe /8. Hier legen wir den Ansichtsstil wie folgt fest

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

, das heißt, wenn der Boden angezeigt wird, bewegt er sich von Höhe/12 auf Höhe/8, die Zeit ist 80 ms, und die Transparenz ändert sich von 0 auf 1. Ausführungszeit 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 sich selbst ansehen und nachahmen.

Definieren Sie die Anzeigezeit

Zuvor haben wir die Toast-Anzeige auf 1000 ms eingestellt, die Anzeigezeit angepasst und die Typnummer begrenzt,

time: PropTypes.number

in die Konstruktion Verarbeitung der Zeit in der Methode

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

Hier verarbeite ich die Zeitanzeige in zwei Werte, SHORT und LONG. Natürlich können Sie sie selbst zum gewünschten Effekt verarbeiten.

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 werden, anstatt in die Render-Methode geschrieben zu werden, definieren wir eine Folgekomponente

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. Sie wird wie oben implementiert und ü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

In Toast sind zwei statische Variablen definiert, die angeben, dass die angezeigte Zeit für den externen Gebrauch bestimmt ist. 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 ihn dann mit der folgenden Methode auf:

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

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle nützlich sein wird.

Verwandte Artikel:

Verwenden von Webpack zum Erstellen von Vue-Gerüsten

So verwenden Sie Webpack zum Verpacken von Dateien

Detaillierte Einführung in die Erstellung von Webpacks

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Toast mit ReactNative. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!