npm 包 react-native-toast-native 使用教程

React Native 是一款用于构建跨平台移动应用程序的 JavaScript 框架。而 toast 是前端经常使用的一种提示框，可以用来显示短暂的消息或者确认框。在 React Native 中，有一个叫做 react-native-toast-native 的 npm 包，可以方便地实现 toast 提示框。本教程将为大家介绍如何使用这个 npm 包。

安装

要使用 react-native-toast-native，首先需要使用 npm 安装它。在终端中进入 React Native 项目根目录，然后执行下面的命令：

npm install --save react-native-toast-native

使用

导入

安装完 react-native-toast-native 后，可以在代码中导入它：

import ToastNative from 'react-native-toast-native';

显示 toast

要显示 toast 提示框，可以调用 ToastNative.show 方法。调用时需要传入一个对象，其中包含要显示的文本、持续时间等信息。下面是一个显示 “Hello, World” 的 toast 的示例代码：

ToastNative.show({
  text: 'Hello, World',
  duration: ToastNative.SHORT,
  position: ToastNative.TOP,
  textColor: '#000000'
});

其中，duration 表示 toast 提示框的持续时间，可以设置为 ToastNative.SHORT 或 ToastNative.LONG；position 表示 toast 提示框的位置，可以设置为 ToastNative.TOP、ToastNative.CENTER 或 ToastNative.BOTTOM；textColor 表示 toast 提示框中文本的颜色。

显示带图标的 toast

有时候我们需要在 toast 提示框中显示一个图标，例如成功、失败、警告等。react-native-toast-native 支持在 toast 提示框中显示 fontawesome 图标。要显示带图标的 toast，可以调用 ToastNative.show 方法时添加 icon 字段，其值为一个 fontawesome 图标的代码。下面是一个显示带图标的 toast 的示例代码：

ToastNative.show({
  text: '操作成功',
  duration: ToastNative.SHORT,
  position: ToastNative.BOTTOM,
  textColor: '#ffffff',
  icon: 'check'
});

注意事项

要使用 react-native-toast-native，需要安装 react-native-vector-icons 并在项目中配置：

1. 在项目中安装 react-native-vector-icons：

npm install --save react-native-vector-icons

1. 执行以下命令建立字体缓存：

react-native link react-native-vector-icons

1. 在项目中的 react-native.config.js 文件中添加如下代码：

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['./node_modules/react-native-vector-icons/Fonts/'],
};

总结

通过本篇教程的学习，您应该已经掌握了使用 react-native-toast-native npm 包实现 toast 提示框的方法。如有疑问，欢迎在评论区留言。

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