React Native 封装Toast

前言

使用react native的小伙伴都知道，官方并未提供轻提示组件，只提供了ToastAndroid API，顾名思义，只能再安卓环境下使用，对于ios就爱莫能助，故此，只能通过官方的核心组件，自行封装，实现Toast功能

实现

创建文件

首先我们需要创建一个Toast组件，引入对应需要的依赖，icon等等
声明数据类型，通用方法

import React, {Component} from 'react'; import {View, Text, StyleSheet, Animated, Easing} from 'react-native'; import icon_success from '../assets/images/icon-success.png'; import icon_error from '../assets/images/icon-error.png'; import icon_loading from '../assets/images/icon-loading.png'; import icon_warning from '../assets/images/icon-warning.png';  type StateType = {   isVisible: boolean;   icon: any;   message: string; };  type ParamsType = string | {message: string; duration?: number}; function getParams(data: ParamsType): {message: string; duration: number} {   let msg!: string;   let dur!: number;   if (typeof data === 'string') {     msg = data;     dur = 2000;   } else {     msg = data.message;     dur = data.duration != null ? data.duration : 2000;   }   return {     message: msg,     duration: dur,   }; } 

实现样式和UI层次渲染

我们需要创建一个class，接收参数，并根据不同的条件渲染：success、error、warning、show、loading等
并抛出自己的实例

class ToastComponent extends Component<{} | Readonly<{}>, StateType> {   timeout!: NodeJS.Timeout;   rotate: Animated.Value = new Animated.Value(0);   constructor(props: {} | Readonly<{}>) {     super(props);     this.state = {       isVisible: false,       icon: null,       message: '',     };     Toast.setToastInstance(this);   }   showToast(icon: any, message: string, duration: number) {     this.setState({       isVisible: true,       icon,       message,     });     if (duration !== 0) {       const timeout = setTimeout(() => {         this.closeToast();       }, duration);       this.timeout = timeout;     }   }   showRotate() {     Animated.loop(       Animated.timing(this.rotate, {         toValue: 360,         duration: 1000,         easing: Easing.linear,         useNativeDriver: true,       }),     ).start();   }   closeToast() {     this.setState({       isVisible: false,       icon: null,       message: '',     });     if (this.timeout) {       clearTimeout(this.timeout);     }   }    render() {     const {isVisible, icon, message} = this.state;     return isVisible ? (       <View style={style.root}>         <View style={[style.main, icon === null ? null : style.mainShowStyle]}>           {icon && (             <Animated.Image               style={[                 style.icon,                 {                   transform: [                     {                       rotate: this.rotate.interpolate({                         inputRange: [0, 360],                         outputRange: ['0deg', '360deg'],                       }),                     },                   ],                 },               ]}               source={icon}             />           )}           <Text style={style.tip}>{message}</Text>         </View>       </View>     ) : null;   } }  const style = StyleSheet.create({   root: {     height: '100%',     backgroundColor: 'transparent',     position: 'absolute',     top: 0,     left: 0,     right: 0,     bottom: 0,     zIndex: 99999,     alignItems: 'center',     justifyContent: 'center',   },   main: {     maxWidth: 200,     maxHeight: 200,     backgroundColor: '#00000099',     borderRadius: 8,     alignItems: 'center',     justifyContent: 'center',     padding: 20,   },   mainShowStyle: {     minWidth: 140,     minHeight: 140,   },   icon: {     width: 36,     height: 36,     resizeMode: 'cover',     marginBottom: 20,   },   tip: {     fontSize: 14,     color: '#fff',     fontWeight: 'bold',     textAlign: 'center',   }, }); 

抛出对外调用的方法

此时我们需要再声明一个class，对外抛出方法以供调用
最后导出即可

class Toast extends Component<{} | Readonly<{}>, {} | Readonly<{}>> {   static toastInstance: ToastComponent;   static show(data: ParamsType) {     const {message, duration} = getParams(data);     this.toastInstance.showToast(null, message, duration);   }   static loading(data: ParamsType) {     const {message, duration} = getParams(data);     this.toastInstance.showToast(icon_loading, message, duration);     this.toastInstance.showRotate();   }   static success(data: ParamsType) {     const {message, duration} = getParams(data);     this.toastInstance.showToast(icon_success, message, duration);   }   static error(data: ParamsType) {     const {message, duration} = getParams(data);     this.toastInstance.showToast(icon_error, message, duration);   }   static warning(data: ParamsType) {     const {message, duration} = getParams(data);     this.toastInstance.showToast(icon_warning, message, duration);   }   static clear() {     if (this.toastInstance) {       this.toastInstance.closeToast();     }   }   static setToastInstance(toastInstance: ToastComponent) {     this.toastInstance = toastInstance;   }   render() {     return null;   } }；  export {Toast, ToastComponent}; 

组件挂载

我们需要将UI层组件在入口TSX文件进行挂载，不然Toast无法渲染

/* APP.tsx */ import React from 'react'; import {StatusBar} from 'react-native'; import {SafeAreaProvider} from 'react-native-safe-area-context';  import {ToastComponent} from './src/components/Toast';  const Stack = createStackNavigator();  function App(): JSX.Element {   return (     <SafeAreaProvider>       <StatusBar barStyle="dark-content" backgroundColor="#EAF7FF" />       <ToastComponent />     </SafeAreaProvider>   ); }  export default App;  

API调用

挂载完成，接下来，在我们需要用到的地方，调用即可

import {Toast} from '../../components/Toast';  //  Toast.success('登录成功'); Toast.error('密码错误'); Toast.warning('我是警告'); Toast.loading('加载中，请稍后'); Toast.loading({message: "我是不关闭的Toast", duration: 0}) Toast.success({message: "我是2秒后关闭的Toast", duration: 2000}); Toast.clear(); // 手动关闭