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='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
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
time: props.time && props.time < 1500 ? Toast.SHORT : Toast.LONG,
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 suiveurimport 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
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
Utilisez
pour importer d'abord le Toast ci-dessus, puis appelezToast.show("测试,我是Toast"); //能设置显示时间的Toast Toast.show("测试",Toast.LONG);
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!