React-Native 轻松实现跨平台 Toast 组件

在移动端开发中，Toast 作为一种轻量级的提示组件，在用户体验中扮演着非常重要的角色。而在 React-Native 技术栈中，我们可以使用第三方库 react-native-toast-message 来快速、方便地实现一个支持 iOS 和 Android 平台的 Toast 组件。

安装和基本使用

首先，我们需要安装 react-native-toast-message：

--- ------- -------------------------- ------

接下来，在项目启动时，需要将 ToastProvider 组件放置在 App 的根组件中，然后就可以在任何需要的地方使用 Toast.show 方法来弹出 Toast 消息了：

-- ------
------ ----- ---- --------
------ - ---- - ---- ---------------
------ ------ - ------------- - ---- -----------------------------

------ ------- -------- ----- -
  ------ -
    ----- -------- ----- - ---
      --- --------- ---
      ---------------
        -------------- --
        ---------- --
        --- --- ---
        ------ ---------- -- ------------------ --
      ----------------
    -------
  --
-

-- ----------------
------ - -------- - ---- -----------------------------

------ ------- -------- --------------- -
  ----- ----- - -----------

  ----- --------- - -- -- -
    ------------
      ----- ----------
      ------ ------- --------
      --------------- -----
    ---
  --

  ------ -
    ----------------- --------------------
      ---------- ------------
    -------------------
  --
-

深入了解

除了基本的使用方法外，react-native-toast-message 还提供了许多更高级的用法。下面我们来看一下几个常用的属性和事件。

属性

position

每个 Toast 组件都需要指定一个位置。默认值是 top，可以设置为 bottom 或者 center。这个属性比较好理解，就不再赘述。

------------
  ----- ----------
  ------ ------- --------
  --------------- -----
  --------- ---------
---

text1 和 text2

这两个属性分别对应 Toast 的主标题和副标题。它们的类型都是字符串。如果你只想显示一个标题，那么可以将 text2 留空或者省略。如果需要显示长文本，建议使用 text1Style 和 text2Style 来控制样式。

------------
  ----- ----------
  ------ ------- --------
  ------ ----- -- - -----------
  --------------- -----
---

type

这个属性表示 Toast 的类型，可以是 success、error、info、warning 或者任何自定义类型。不同的类型会有不同的颜色和图标。如果要自定义类型，可以使用 customType 属性。下面是内置类型的演示：

------------
  ----- ----------
  ------ -----------
---

------------
  ----- --------
  ------ ---------
---

------------
  ----- -------
  ------ --------
---

------------
  ----- ----------
  ------ -----------
---

事件

onShow 和 onHide

这两个事件分别在 Toast 显示和隐藏时触发。它们的参数是一个包含 Toast 的所有属性的对象。

------------
  ----- ----------
  ------ ------- --------
  --------------- -----
  ------- ------- -- ------------------ -------- -------
  ------- ------- -- ------------------ --------- -------
---

onPress

这个事件在用户点击 Toast 时触发。它的参数是一个包含 Toast 的所有属性的对象。如果想要让 Toast

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6814