在移动端开发中，Toast 作为一种轻量级的提示组件，在用户体验中扮演着非常重要的角色。而在 React-Native 技术栈中，我们可以使用第三方库 react-native-toast-message 来快速、方便地实现一个支持 iOS 和 Android 平台的 Toast 组件。
安装和基本使用
首先，我们需要安装 react-native-toast-message：
npm install react-native-toast-message --save
接下来，在项目启动时，需要将 ToastProvider 组件放置在 App 的根组件中，然后就可以在任何需要的地方使用 Toast.show 方法来弹出 Toast 消息了：
-- -------------------- ---- -------
-- ------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ------ - ------------- - ---- -----------------------------
------ ------- -------- ----- -
------ -
----- -------- ----- - ---
--- --------- ---
---------------
-------------- --
---------- --
--- --- ---
------ ---------- -- ------------------ --
----------------
-------
--
-
-- ----------------
------ - -------- - ---- -----------------------------
------ ------- -------- --------------- -
----- ----- - -----------
----- --------- - -- -- -
------------
----- ----------
------ ------- --------
--------------- -----
---
--
------ -
----------------- --------------------
---------- ------------
-------------------
--
-深入了解
除了基本的使用方法外，react-native-toast-message 还提供了许多更高级的用法。下面我们来看一下几个常用的属性和事件。
属性
position
每个 Toast 组件都需要指定一个位置。默认值是 top，可以设置为 bottom 或者 center。这个属性比较好理解，就不再赘述。
toast.show({
type: 'success',
text1: 'Hello, World!',
visibilityTime: 2000,
position: 'bottom',
});text1 和 text2
这两个属性分别对应 Toast 的主标题和副标题。它们的类型都是字符串。如果你只想显示一个标题，那么可以将 text2 留空或者省略。如果需要显示长文本，建议使用 text1Style 和 text2Style 来控制样式。
toast.show({
type: 'success',
text1: 'Hello, World!',
text2: 'This is a subtitle.',
visibilityTime: 2000,
});type
这个属性表示 Toast 的类型，可以是 success、error、info、warning 或者任何自定义类型。不同的类型会有不同的颜色和图标。如果要自定义类型，可以使用 customType 属性。下面是内置类型的演示：
-- -------------------- ---- ------- ------------ ----- ---------- ------ ----------- --- ------------ ----- -------- ------ --------- --- ------------ ----- ------- ------ -------- --- ------------ ----- ---------- ------ ----------- ---
事件
onShow 和 onHide
这两个事件分别在 Toast 显示和隐藏时触发。它们的参数是一个包含 Toast 的所有属性的对象。
toast.show({
type: 'success',
text1: 'Hello, World!',
visibilityTime: 2000,
onShow: (props) => console.log('Toast shown:', props),
onHide: (props) => console.log('Toast hidden:', props),
});onPress
这个事件在用户点击 Toast 时触发。它的参数是一个包含 Toast 的所有属性的对象。如果想要让 Toast
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6814
