npm 包 react-native-awesome-action-sheet 使用教程

介绍

react-native-awesome-action-sheet 是一个 React Native 组件库，它提供了漂亮的动作单和警告框以及特殊的功能比如分享。

安装

使用 npm 安装:

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

使用

引入组件：

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

使用组件：

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

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

API

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

该方法接收两个参数。第一个参数包含以下选项：

  • options (Array) - 字符串数组，表示每个选项的文本。必需.
  • title (String) - 标题，可选.
  • message (String) - 消息定义选项，可选.
  • tintColor (String) - 按钮文本的颜色，默认值与 React Native 按钮文本颜色相同。

第二个参数是所选选项的索引的回调函数，如果取消，则返回-1。

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

该方法接收三个参数。第一个参数包含以下选项：

  • url (String) - 要分享的链接，必需.
  • subject (String) - 主题文本，可选.
  • message (String) - 消息内容，可选.

第二个参数是失败回调函数，第三个参数是成功回调函数。

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

当选项被选中时，该方法将调用回调函数，并传递所选选项的索引。

示例代码

完整代码可以在 这里 找到。

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

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

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

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

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

结论

react-native-awesome-action-sheet 在 React Native 中提供了漂亮的动作单和警告框，以及特殊的功能比如分享。该组件易于使用，API 简单清晰，可用于您的下一个 React Native 项目中。希望本篇文章对你有所帮助！

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60056cd681e8991b448e6745

阅读全文

猜你喜欢

  • npm 包 ezini 使用教程

    介绍 在前端开发中，绝大部分工程师都会使用到配置文件，而 ezini 是一个非常小巧的 npm 包，可以轻松地解析 ini 格式的文件，帮助开发者读取和设置配置信息。

    3 年前
  • npm 包 imeepos-runnerpro 使用教程

    前言 随着前端发展的步伐越发迅速，前端开发工具也日新月异。今天我要向各位介绍一款前端工具：imeepos-runnerpro npm 包，它是一款非常方便的前端自动化构建工具，可以帮助我们快速搭建前端...

    3 年前
  • npm 包 vdom-typed 使用教程

    虚拟 DOM（Virtual DOM）是前端开发中常用的核心技术之一。它可以让我们更有效地管理 DOM，提高性能，降低开发成本。而 vdom-typed 这个 npm 包，让我们可以更轻松地创建和操作...

    3 年前
  • npm 包 gap-input 使用教程

    在前端开发中，输入框是一个必不可少的组件，开发者需要经常为不同的输入框编写不同的样式和验证函数。为了方便开发者，社区中出现了不少开源的输入框组件，其中 gap-input 就是其中之一。

    3 年前
  • npm 包 singular-plural-json 使用教程

    前言 在前端开发过程中，处理数据的时候，经常需要对单复数进行转化，例如 “1 person” 和 “2 people”。这时候通常需要使用一些库来实现这个功能。今天，我们将介绍一个非常有用的 npm ...

    3 年前
  • npm 包 universal-acl 使用教程

    什么是 universal-acl ？ universal-acl 是一个适用于 Node.js 的轻量级权限控制（Access Control List）解决方案。

    3 年前
  • npm 包 veams-plugin-templater 使用教程

    概述 在前端开发中，我们经常需要使用模板来组织和呈现页面内容。而 veams-plugin-templater 是一个能够帮助我们管理模板的 npm 包。它提供了强大、灵活和易于使用的功能，能够大大提...

    3 年前
  • npm 包 randomize.js 使用教程

    简介 randomize.js 是一个用于生成随机数据的 npm 包。它支持生成随机的数字、字符串、数组、布尔值等数据类型。在前端开发中，我们经常需要使用随机数据来模拟一些场景，比如测试数据、数据样本...

    3 年前
  • npm 包 @kessler/ec2-util 使用教程

    简介 npm 是 JavaScript 包管理器，开发者可以使用 npm 命令来安装自己开发的并发布到 npm 上的 npm 包。@kessler/ec2-util 是一个由 Kessler 的开发团...

    3 年前
  • npm 包 events-names 使用教程

    引言 在前端开发中，我们经常需要进行事件的管理和处理，但是不同的事件名称可能会被多处使用，针对不同的业务需求，我们还需要定义自己的事件名称，这种情况下，我们需要对事件名称进行管理和维护，以免出现混淆和...

    3 年前
  • npm 包 comment-tag-extractor 使用教程

    简介 comment-tag-extractor 是一个可以在 JavaScript 文件中抽取注释标签的 npm 包。它可以帮助我们更好地组织和管理代码注释。 该包可以解析标准的 JSDoc 注释标...

    3 年前
  • npm 包 cordova-plugin-nativesounds 使用教程

    前言 在移动端开发中，经常需要使用原生的音效来增加用户体验，而 cordova-plugin-nativesounds 就是可以让我们在 Cordova 应用中使用原生音效的插件。

    3 年前
  • npm 包 gouldi 使用教程

    前言 gouldi 是一个轻量级的 JavaScript 工具库，旨在提供对常用方法和类的便捷访问和封装，使得开发者可以更加高效地编写代码，在快速迭代的前端项目中使用。

    3 年前
  • npm 包 ouyo 使用教程

    简介 ouyo 是一个基于 Vue.js 和 ElementUI 的前端组件库。它提供了多种常用组件，如输入框、按钮、表格、下拉框等。使用 ouyo 可以快速构建一个美观、易用的前端界面。

    3 年前
  • npm 包 renate 使用教程

    前言 随着前端技术的不断发展，现在很多前端项目都采用了组件化开发的方式来提高代码的复用性和可维护性。而 renate 就是一个可以快速创建可复用组件的 npm 包。

    3 年前
  • npm 包 rnr-timeline 使用教程

    前言 在 Web 开发中，时间轴是一种常见的交互方式。而 rnr-timeline 是一个基于 React 的时间轴组件库，通过简单易用的 API 可以快速地构建时间线。

    3 年前
  • npm 包 hex.js 使用教程

    注：本文介绍 npm 包 hex.js 的使用教程，需要读者具备一定的前端基础。 什么是 hex.js？ hex.js 是一个基于 HTML5 Canvas 的 JavaScript 库，用于绘制...

    3 年前
  • npm 包 terminal-log 使用教程

    在前端开发中，调试是一项必要的任务，我们需要在控制台输出各种信息来帮助我们分析问题和查看程序执行过程。而 npm 包 terminal-log 就是一款优秀的控制台输出工具。本文将介绍如何使用该工具。

    3 年前
  • npm 包 css-razor 使用教程

    简介 CSS-razor 是一个开源的 npm 包，它可以帮助你简单而高效地优化你的 CSS 代码。它可以自动移除 CMS 中未使用的 CSS 样式，减小 CSS 文件大小，提高网站的加载速度。

    3 年前
  • npm 包 nonbox-client 使用教程

    什么是 nonbox-client nonbox-client 是一个简单易用的通过 WebSocket 连接到 Nonbox 后台服务器的 JavaScript 库。

    3 年前

相关推荐

    暂无文章