前言
在使用 React Native 开发过程中，Toast 是一个非常常用的组件。Toast 是一种在屏幕上显示简短信息的方式，通常用于确认操作是否被执行或给用户提示信息。React Native 中内置了 ToastAndroid 和 Alert 等组件，但它们的样式并不是很友好。在解决这个问题时，我们可以使用第三方 Toast 组件库 -- react-native-lite-toast。
安装
使用 npm 进行安装：
npm install react-native-lite-toast --save-dev
在项目中引入 Toast：
import Toast from 'react-native-lite-toast';
使用
显示 Toast
Toast.show('Hello React Native', Toast.SHORT);Toast.show 的第一个参数为要显示的文本，第二个参数为 Toast 的持续时间。Toast.SHORT 表示持续时间较短，Toast.LONG 表示持续时间较长，默认为 Toast.SHORT。
定制 Toast 样式
我们可以通过在项目样式表中定义 global.toast，来定制 Toast 样式：
-- -------------------- ---- -------
----- ------ - -------------------
---------- -
-- ---
--
------ -
---------------- -------- -- -- ------
------------- --
-------- ---
------- ---
--
----- -
------ -------
--
---
-------------------------------------- -- -- -----
-- -- ----- --
---------------------------- -------------上面代码中，我们通过 Toast.setStyle 方法来设置 Toast 样式。传入的参数分别是 Toast 的 Container 样式和 Text 样式。
链式使用
Toast.show('Hello React Native')
.then(() => console.log('Toast显示完成'))
.catch((e) => console.log('Toast显示失败'));链式使用的方式可以帮助我们更好的控制 Toast 的显示流程，在 Toast 显示完成或出错时做相应的处理。
总结
react-native-lite-toast 是一个功能简单、易于使用并且样式易于定制的 Toast 组件库，相比 React Native 自带的 ToastAndroid 和 Alert，react-native-lite-toast 更加美观和易于使用。在日常开发中使用 react-native-lite-toast 可以显著提高开发效率和用户体验。
示例代码
-- -------------------- ---- -------
------ ------ ----------- ---- --------
------ ------------ ----- ----- ------- ----------------- ---- ---------------
------ ----- ---- --------------------------
----- --- - -- -- -
------------ -- -
-- -- ----- --
----- ------ - -------------------
---------- ---
------ -
---------------- -------- -- -- ------
------------- --
-------- ---
------- ---
--
----- -
------ -------
--
---
---------------------------- -------------
-- ----
----- --------------- - -- -- -
----------------- ----- --------
-------- -- -------------------------
---------- -- --------------------------
--
------ -
----- -------------------------
----------------- --------------------- --------------------------
----- ----------------------------- ------------
-------------------
-------
--
--
----- ------ - -------------------
---------- -
----- --
--------------- ---------
----------- ---------
--
------- -
---------------- ----------
-------- ---
------------- --
--
------------ -
------ -------
--------- ---
--
---
------ ------- ----来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055a2e81e8991b448d7d07