npm 包 react-native-toast-notification 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

在移动应用开发过程中，Toast 等提示功能是非常常见的。而在 React Native 开发中，可以使用第三方库 react-native-toast-notification，快速实现 Toast 功能。本文将介绍 react-native-toast-notification 的使用方法，帮助开发者快速获取 Toast 提示功能。

安装

第一步：安装 react-native-toast-notification

npm i react-native-toast-notification --save

第二步：安装 react-native-svg

react-native-toast-notification 依赖 react-native-svg，需要先安装 react-native-svg。

npm i react-native-svg --save

第三步：安装 react-native-svg-transformer

不同于 react-native-svg 的原生实现，一些自定义图形的使用需要在程序运行前就编译，此时需要使用 react-native-svg-transformer。安装：

npm i react-native-svg-transformer --save-dev

使用

导入 Toast 组件：

import Toast from 'react-native-toast-notification';

使用 Toast：

Toast.show({
  title: 'Hello, Toast!',
  type: 'success',
  description: 'This is a toast demo',
  windowHeight: 50,
  duration: 2000,
});

参数说明

show() 方法需要传递一个 Object 类型的参数，参数包括以下：

title: Toast 标题
type: Toast 类型，可选值为 success、warning、error
description: Toast 描述信息
windowHeight: Toast 的高度
duration: Toast 显示的时间

示例代码

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

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

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

结语

在本文中，我们介绍了 react-native-toast-notification 的安装和使用方法，并提供了示例代码，希望能够为 React Native 开发者提供一些帮助。如有问题欢迎留言交流。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/600671d630d0927023822c6e