React Native Toast Message API 完全指南

原创于 2025-06-26 09:29:39 发布 · 621 阅读

CC 4.0 BY-SA版权

React Native Toast Message API 完全指南

react-native-toast-message Animated toast message component for React Native 项目地址: https://gitcode.com/gh_mirrors/re/react-native-toast-message

前言

在移动应用开发中，Toast 通知是一种轻量级的反馈机制，它可以在不打断用户操作的情况下提供重要信息。React Native Toast Message 是一个功能强大且高度可定制的 Toast 通知库，本文将深入解析其 API 使用方法。

核心概念

React Native Toast Message 提供了两种主要的使用方式：

命令式方法：通过直接调用 Toast 对象上的方法来显示通知
组件属性：通过配置 Toast 组件实例的属性来设置全局默认值

命令式方法详解

show(options) 方法

show() 方法是显示 Toast 的主要方式，它接受一个配置对象作为参数。下面是一个基础示例：

import Toast from 'react-native-toast-message';

Toast.show({
  type: 'success',
  text1: '操作成功',
  text2: '您的数据已保存'
});

完整配置选项

| 选项 | 描述 | 类型 | 默认值 | |-------------------|----------------------------------------------------------------------------------------------------|--------------------|--------------| | type | Toast 类型，内置支持 success/error/info，可自定义 | string | 'success' | | text1 | 主标题文本 | string | - | | text2 | 副标题文本 | string | - | | position | 显示位置，支持 top/bottom | 'top'或'bottom' | 'top' | | visibilityTime | 自动隐藏的延迟时间(毫秒)，需配合 autoHide 使用 | number | 4000 | | autoHide | 是否自动隐藏 | boolean | true | | topOffset | 距离屏幕顶部的偏移量(像素)，仅 position='top' 时有效 | number | 40 | | bottomOffset | 距离屏幕底部的偏移量(像素)，仅 position='bottom' 时有效 | number | 40 | | keyboardOffset | 键盘出现时的偏移量(像素)，仅 position='bottom' 且在 iOS 上有效 | number | 10 | | onShow | Toast 显示时的回调 | () => void | - | | onHide | Toast 隐藏时的回调 | () => void | - | | onPress | Toast 被点击时的回调 | () => void | - | | props | 传递给自定义 Toast 类型的额外属性 | any | - |

hide() 方法

hide() 方法用于手动隐藏当前显示的 Toast：

Toast.hide();

当 Toast 隐藏时，如果配置了 onHide 回调，它将被触发。

组件属性配置

通过在 Toast 组件实例上设置属性，可以为所有显示的 Toast 设置默认值：

import Toast from 'react-native-toast-message';

function App() {
  return (
    <>
      {/* 其他组件 */}
      <Toast
        position="bottom"
        bottomOffset={20}
        visibilityTime={3000}
      />
    </>
  );
}

完整属性列表

| 属性 | 描述 | 类型 | 默认值 | |-------------------|----------------------------------------------------------------------------------------------------|--------------------|--------------| | config | 自定义 Toast 类型的布局配置 | ToastConfig | - | | type | 默认 Toast 类型 | string | 'success' | | position | 默认显示位置 | 'top'或'bottom' | 'top' | | visibilityTime | 默认自动隐藏延迟时间(毫秒) | number | 4000 | | autoHide | 是否默认自动隐藏 | boolean | true | | swipeable | 是否可以通过滑动关闭 Toast | boolean | true | | topOffset | 默认顶部偏移量 | number | 40 | | bottomOffset | 默认底部偏移量 | number | 40 | | keyboardOffset | 默认键盘偏移量 | number | 10 | | onShow | 默认显示回调 | () => void | - | | onHide | 默认隐藏回调 | () => void | - | | onPress | 默认点击回调 | () => void | - |