# @backpackapp-io/react-native-toast 中文文档 规范地址：https://npmcn.com/package/%40backpackapp-io/react-native-toast/ 版本：0\.15\.1 npm 元数据更新时间：2025-11-02T23:06:35.879Z 中文译文更新时间：2026-11-07T14:10:16.905Z 软件包许可：MIT 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40backpackapp-io/react-native-toast 原文对照：https://npmcn.com/package/%40backpackapp-io/react-native-toast/?lang=original 项目主页：https://github.com/backpackapp-io/react-native-toast.git#readme 源码仓库：https://github.com/backpackapp-io/react-native-toast ## 关键信息（来自 npm 元数据） - 包体积（解压后）：202 kB，110 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：1 个 - peer 依赖：react \*，react-native \*，react-native-gesture-handler \>=2\.2\.1，react-native-reanimated \>=2\.8\.0，react-native-safe-area-context \>=4\.2\.4 - 首次发布：2022-07-23T00:06:53.919Z - 最新版本发布：2025-11-02T23:06:35.645Z - 近 30 天下载量：351971（2026-10-08 至 2026-11-06，npm 官方下载统计） - 已发布版本数：22（近 12 个月 0 个） ## 中文简介 为React Industrial干杯的图书馆. 建在诸如刷去去去除, 多个土司. ## 安装 ```sh npm install @backpackapp-io/react-native-toast ``` 也可以使用：`pnpm add @backpackapp-io/react-native-toast`、`yarn add @backpackapp-io/react-native-toast`、`bun add @backpackapp-io/react-native-toast` ## README # 反应原生土司 [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/) [![GitHub license](https://img.shields.io/github/license/backpackapp-io/react-native-toast)](https://github.com/backpackapp-io/react-native-toast/blob/master/LICENSE) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@backpackapp-io/react-native-toast) 英语 [한국어](https://npmcn.com/package/%40backpackapp-io/react-native-toast/README-ko.md) 一个用于反应-原生的土司库, 以 [反应- 热- 托斯克](https://react-hot-toast.com/docs)它支持多种祝酒会、键盘操作、刷去辞退、姿势祝酒会和联署材料承诺等特征。 它运行在iOS,和机器人,和网络. [视频](https://user-images.githubusercontent.com/27066041/180588807-1ca73f29-56d7-4e44-ac0c-9f2e2cdeb94c.mp4) ### 为什么? 我知道你在想什麽_又是吐司图书馆吗?_) (中文(简体) ). 相信我,这是你需要的最后一个吐司图书馆 我建造这个图书馆是为了满足我具体的应用需求,在意识到它真正是一个顶尖的吐司图书馆后,决定打开它的来源. 试试看. # 特征 - **多个土司,多个选项**想要一个敬酒 在上,下,不同颜色,或不同类型 同时? 明白吗. - **键盘处理** (无论是iOS还是Android). 当用户打开键盘时, 把这些祝酒词移出视线 - **撤职** - **立场土司** (上下相克相克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克克 - **可自定义** (习惯风格,尺寸,持续时间,甚至创建自己的组件用于土司) - 添加对支持 **承诺** 痷 打电话 `toast.promise(my_promise)` 并观看反应 - 土生土长的功用 它的魔法, 自动更新土司 的自定义消息 关于成功 - 或一个错误消息 关于拒绝. - 运行在 **网络** - 对本地模式的支持 - 新闻、秀和隐藏的回叫 # 文档 查看全部文档 [这里](https://nickdebaise.github.io/packages/react-native-toast/) # 开始 ## 安装 ```sh yarn add @backpackapp-io/react-native-toast # or npm i @backpackapp-io/react-native-toast ``` #### 同伴依赖关系 安装和链接 [反应-原生再激活](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/), (中文(简体) ), [反应-内在-安全区域-文本](https://github.com/th3rdwave/react-native-safe-area-context),以及 [反应-内在-地貌-处理器](https://docs.swmansion.com/react-native-gesture-handler/docs/installation) ```sh yarn add react-native-reanimated react-native-safe-area-context react-native-gesture-handler ``` _确保您跟踪每个软件包的安装_ _利用博览会?_ ```sh npx expo install react-native-reanimated react-native-safe-area-context react-native-gesture-handler ``` ### 酷,现在怎么办? 将您的应用包成 `` 财务报告和审定财务报表 `` 添加( a) `` 组件到您的应用程序根. 打电话 `toast("My Toast Message")` 当你准备好从 _任何地方_ 在你的应用程序. ```js import { View, StyleSheet, Text } from 'react-native'; import { GestureHandlerRootView } from 'react-native-gesture-handler'; import { SafeAreaProvider } from 'react-native-safe-area-context'; import { toast, Toasts } from '@backpackapp-io/react-native-toast'; import { useEffect } from 'react'; export default function App() { useEffect(() => { toast('Hello'); }, []); return ( {/*The rest of your app*/} {/* <---- Add Here */} ); } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); ``` ## 示例 #### 常规吐司 ```js toast("This is my first toast", { duration: 3000, }); ``` #### 保证敬酒 ```js const sleep = new Promise((resolve, reject) => { setTimeout(() => { if (Math.random() > 0.5) { resolve({ username: 'Nick', }); } else { reject('Username is undefined'); } }, 2500); }); toast.promise( sleep, { loading: 'Loading...', success: (data: any) => 'Welcome ' + data.username, error: (err) => err.toString(), }, { position: ToastPosition.BOTTOM, } ); ``` #### 正在装入托拉斯 ```js const id = toast.loading('I am loading. Dismiss me whenever...'); setTimeout(() => { toast.dismiss(id); }, 3000); ``` #### 成功祝酒词 ```js toast.success('Success!', { width: 300 }); ``` #### 标签错误 ```js toast.error('Wow. That Sucked!'); ``` ## 常见问题 ### @backpackapp-io/react-native-toast 是什么？ 为React Industrial干杯的图书馆\. 建在诸如刷去去去除, 多个土司\. ### 如何安装 @backpackapp-io/react-native-toast？ 在项目目录运行 npm install @backpackapp-io/react-native-toast，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（\*）、react-native（\*）、react-native-gesture-handler（\>=2\.2\.1）、react-native-reanimated（\>=2\.8\.0）、react-native-safe-area-context（\>=4\.2\.4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @backpackapp-io/react-native-toast 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @backpackapp-io/react-native-toast 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @backpackapp-io/react-native-toast 可以商用吗？ @backpackapp-io/react-native-toast 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。 ### @backpackapp-io/react-native-toast 的下载量有多少？ 根据 npm 官方下载统计，@backpackapp-io/react-native-toast 在 2026/10/08 – 2026/11/06 这 30 天内被下载 351,971 次，日均约 11,732 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @backpackapp-io/react-native-toast 还在维护吗？ 最新版本 0\.15\.1 发布于 2025/11/03（1 年前）；至今共发布 22 个版本，其中过去 12 个月发布了 0 个；首次发布于 2022/07/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。