React Native实现Toast轻提示和loading

2023-08-31 17:17 由 Lanny-Chung 发表于 #前端开发

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(); // 手动关闭