介绍
React Native Toast 是一个可以在 React Native 中使用的 toast 组件，它可以方便地在屏幕上显示一些简短的通知消息，例如：提示信息、成功或错误消息等。
npm 包 @uuau99999/react-native-toast 则是基于 React Native Toast 的二次封装，它可以更加简单、灵活地使用 React Native Toast，提供了更多的自定义选项，可以让我们快速、方便地实现我们的需求。
本篇文章将介绍 npm 包 @uuau99999/react-native-toast 的使用教程，包括安装、API 介绍、示例等内容。希望通过本文的介绍，你可以更好地理解和使用 React Native Toast。
安装
在使用之前，我们需要先安装 @uuau99999/react-native-toast。可以使用 npm 或者 yarn 安装：
# 使用 npm 安装 npm install @uuau99999/react-native-toast --save # 使用 yarn 安装 yarn add @uuau99999/react-native-toast
API 介绍
1. Toast.show(message, [options])
显示一个 toast。
参数：
message(string，必选)：要显示的 toast 消息内容。options(object，可选)：toast 的配置选项。
options 可选项：
duration(string，可选，缺省值为 'SHORT')：toast 的持续时间。可选值有：- 'SHORT' (短时间)。
- 'LONG' (长时间)。
position(string，可选，缺省值为 'BOTTOM')：toast 在屏幕上的位置。可选值有：- 'TOP' (顶部)。
- 'CENTER' (中间)。
- 'BOTTOM' (底部)。
backgroundColor(string，可选，缺省值为 '#4a4a4a')：toast 的背景颜色。textColor(string，可选，缺省值为 '#fff')：toast 文本的颜色。opacity(number，可选，缺省值为 0.8)：toast 的透明度。borderRadius(number，可选，缺省值为 10)：toast 的圆角半径。fontSize(number，可选，缺省值为 16)：toast 文本的字体大小。paddingHorizontal(number，可选，缺省值为 10)：toast 的水平内边距。paddingVertical(number，可选，缺省值为 5)：toast 的垂直内边距。
示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ----- ---- --------------------------------
------ ------- -------- ----- -
----- --------- - -- -- -
----------------- ---------
-
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----------------- --------------------
---------- ------------
-------------------
-------
--
-运行示例，当点击 "Show Toast" 按钮时，会在屏幕底部显示一个默认样式的 tip。
2. Toast.hide()
隐藏当前显示的 toast。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ----- ---- --------------------------------
------ ------- -------- ----- -
----- --------- - -- -- -
----- ----- - ----------------- ---------
------------- -- -
------------------
-- ------
-
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----------------- --------------------
---------- ------------
-------------------
-------
--
-运行示例，当点击 "Show Toast" 按钮时，会在屏幕底部显示一个默认样式的 tip，3 秒后自动隐藏。
自定义样式
除了使用默认样式之外，我们还可以根据自己的需求，自定义 toast 的样式。在 options 中，我们可以设置 backgroundColor、textColor、opacity、borderRadius、fontSize、paddingHorizontal、paddingVertical 等属性，来实现样式的自定义。
下面，我们来给 toast 添加一个背景色为 #FC6E51、字体颜色为 #FFF、圆角半径为 15、字体大小为 20 的样式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- ----- ---------------- - ---- ---------------
------ ----- ---- --------------------------------
------ ------- -------- ----- -
----- --------- - -- -- -
----------------- -------- -
---------------- ----------
---------- -------
------------- ---
--------- ---
---
-
------ -
----- -------- ----- -- --------------- --------- ----------- -------- ---
----------------- --------------------
---------- ------------
-------------------
-------
--
-运行示例，当点击 "Show Toast" 按钮时，会在屏幕底部显示一个自定义样式的 tip。
深度解析
上面介绍了 @uuau99999/react-native-toast 的 API 和样式自定义，现在，我们来深入了解一下该组件的实现原理。
首先，我们看一下该组件的源码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- ----- ---- - ---- ---------------
------ ----- ---- -----------------------------
------ ------- -
----- --------- -------- -- -
----- ------- - ------------
------- -- -- -
----- -------------------------
----- -------------------- -
---------------- ----------------------- -- ----------
------ ----------------- -- -------
-------- --------------- -- ----
------------- -------------------- -- ---
--------- ---------------- -- ---
------------------ ------------------------- -- ---
---------------- ----------------------- -- --
----
---------
-------
-------
--
--------- ----------------- -- ----------------------
---------------- --------------
--------- ----------------- -- -----------------------
------------ -----
---
------ --------
--
----- --------- -- -
--------------------
--
--
----- ------ - -------------------
---------- -
------ -------
----------- ---------
--------------- ---------
--
----- -
---------- ---------
--
---代码很简单，就是对 React Native Toast 进行了一层封装，提供了 show 和 hide 两个方法。
其中，show 方法会渲染一个 View 组件，该组件会包含一个 Text 子组件，用于显示 toast 的文本内容。用户可以通过 options 参数来自定义 toast 的样式和行为。
duration 用于设置 toast 的持续时间，取值可以是 Toast.durations.SHORT（短时间）或 Toast.durations.LONG（长时间），前者等同于设置 2 秒钟，后者等同于设置 5 秒钟。
position 用于设置 toast 的显示位置，取值可以是 Toast.positions.TOP（顶部）、Toast.positions.CENTER（中间）或 Toast.positions.BOTTOM（底部），缺省值为 BOTTOM。
hide 方法没有什么好讲的，只是封装了 React Native Toast 的 hide 方法。
最后，我们来看一下 Toast 的实现原理。Toast 在 Android 和 iOS 上的实现方式略有不同。
在 Android 上，Toast 会使用 WindowManager 来显示一个系统级别的 View，该 View 在任务栏上面浮动，具有高优先级，而且不会受到当前应用程序的界面上的操作的限制。
在 iOS 上，可以使用 SVProgressHUD 或者 MBProgressHUD 进行 toast 提示。
总结
@uuau99999/react-native-toast 是一个 React Native 中使用的 toast 组件，使用起来非常简单、灵活、易用。通过本文的介绍，相信你已经掌握了该组件的使用方法和原理。在实际开发过程中，你可以根据自己的需求，自定义 toast 的样式和行为，让用户获得更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005613281e8991b448df3ad