npm 包 react-native-swiping-cards 使用教程

在移动端开发中，卡片式交互成为越来越流行的一种操作方式。react-native-swiping-cards 就是一款非常实用的 npm 包，可以方便快捷地实现卡片式交互效果。

安装和使用

在终端中运行以下命令安装 react-native-swiping-cards：

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

安装成功后，在 React Native 项目中导入 node_modules/react-native-swiping-cards/index.js 文件，即可使用 react-native-swiping-cards 。

示例代码

在你的组件中使用 SwipeCards 组件：

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

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

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

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

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

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

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

属性说明

SwipeCards 组件支持以下属性：

  • cards：必填，卡片数据源，数组类型；
  • renderCard：必填，渲染卡片函数，函数类型，接收一个参数，参数为当前卡片的数据，返回一个可以被渲染的 React 组件；
  • onYup：选填，用户滑动卡片向右时触发的函数；
  • onNope：选填，用户滑动卡片向左时触发的函数；
  • onMaybe：选填，用户滑动卡片向上或向下时触发的函数；
  • handleSwipeStart：选填，用户开始滑动卡片时触发的函数；
  • handleSwipeEnd：选填，用户结束滑动卡片时触发的函数；
  • yupText：选填，设置向右滑动卡片按钮的文本；
  • nopeText：选填，设置向左滑动卡片按钮的文本；
  • maybeText：选填，设置向上或向下滑动卡片按钮的文本。

指导意义

react-native-swiping-cards 是一款非常实用的 npm 包，可以帮助开发者快速实现卡片式交互效果。通过阅读本文，你不仅可以了解 react-native-swiping-cards 的安装和使用方法，还可以根据示例代码进行实践，提高自己在移动端开发方面的技能水平。

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

阅读全文

猜你喜欢

  • npm 包 mode-s-demodulator 使用教程

    简介 mode-s-demodulator 是一个 Node.js 包，用于将 Mode-S 信号解调为 ADS-B 信号。Mode-S 是用于飞机识别和交通控制的一种二进制雷达信号。

    3 年前
  • npm 包 react-node.bittrex.api 使用教程

    介绍 npm 包 react-node.bittrex.api 是一种基于 React 和 Node.js 平台的虚拟货币比特币交易 API，它可以让你轻松愉快地使用 Bittrex.com 提供的 ...

    3 年前
  • npm 包 fetch-improve 使用教程

    在前端开发中，经常需要使用网络请求获取后台数据，而 fetch 就是一种常用的网络请求方式。但是，原生的 fetch 有诸多缺点，如不支持网络请求的超时时间、不支持自动重试、不支持请求取消等。

    3 年前
  • npm 包 swgg-google 使用教程

    什么是 swgg-google？ swgg-google 是一个基于 Google API 实现的 Swagger（OpenAPI）的接口代码生成工具包。它可以让前端开发者快速地生成前端所需要的 AP...

    3 年前
  • npm 包 glad-demo-for-npm-publish 使用教程

    前言 npm（Node.js package manager）是世界上最大的软件注册表之一，允许开发者共享他们的包以供其他人使用。在前端开发中，npm 是一个必不可少的技术，它可以让我们快速、方便地管...

    3 年前
  • npm 包 promisified-redis 使用教程

    前言 Redis 是一个常见的 key-value 存储数据库，常用于缓存与消息队列等场景。同时，Promise 是 ES6 中新增的一种异步编程方式，它可以将回调地狱代码变为更加清晰、易读的链式调用...

    3 年前
  • npm 包 thara 使用教程

    在前端开发中，我们常常需要对用户行为进行日志埋点，以便进行数据分析和业务优化。而 thara 就是一个可以帮助我们实现这一功能的 npm 包，它提供了一个简单易用的 API，可以帮助我们在页面中添加埋...

    3 年前
  • npm 包 v2-hotkey 使用教程

    概述 在前端开发过程中，经常需要实现一些快捷键功能，如Ctrl+C、F1、Enter等。为了方便地实现这些功能，我们可以使用 v2-hotkey 这个 npm 包。

    3 年前
  • npm 包 gmusic-meta.js 使用教程

    前言 在开发音乐相关的 Web 应用程序中，获取歌曲的一些元数据信息是非常必要的，比如歌曲的艺术家、歌曲名、专辑名、时长等等。为此，我们可以使用 JavaScript 包管理器 npm 上的 gmus...

    3 年前
  • npm 包 dynamodb-cake 使用教程

    前言 在进行 Web 开发的过程中，我们需要使用数据库来储存和管理数据。AWS 的 DynamoDB 是一个极具可扩展性的 NoSQL 数据库，它能够在高流量的情况下保持可靠的性能，因此也是开发者首选...

    3 年前
  • npm 包 react-finite-loader 使用教程

    如果你在不断追求网站性能提升的道路上，相信你一定会接触到需要使用加载器（Loader）的时候。 在前端开发中，react-finite-loader 常用于优化页面的加载体验，提升用户体验；在加载过程...

    3 年前
  • npm 包 screwdriver-notification-slacks 使用教程

    简介 screwdriver-notification-slacks 是一个基于 Screwdriver CI/CD 工具的 npm 包，其功能为在 Screwdriver 构建完成之后，将构建结果发...

    3 年前
  • npm 包 cfcmxk 使用教程

    npm 是 JavaScript 世界的包管理工具，它让开发者能够更加方便地分享和重用代码。在这篇文章中，我们将详细介绍一个名为 cfcmxk 的 npm 包的使用方法，并且提供详细的示例代码。

    3 年前
  • npm 包 instrumentation-react.js 使用教程

    引言 instrumentation-react.js 是一个可用于前端监控及分析的 npm 包。它提供了多种 React 组件、HOC（高阶组件）以及函数，用于记录用户行为、性能数据、错误信息等。

    3 年前
  • npm包 struct-extras使用教程

    前言 在前端开发中，我们经常需要处理数据结构。而npm上的struct-extras依赖库可以帮助我们更加高效地进行数据结构的处理。本文就来介绍一下如何使用struct-extras。

    3 年前
  • npm 包 eslint-config-chernetsov 使用教程

    在前端开发过程中，代码的质量是尤为重要的。为了确保代码的质量和一致性，我们需要使用 ESLint 来规范我们的代码风格。而 eslint-config-chernetsov 正是一款适用于前端项目的 ...

    3 年前
  • npm 包 handlebars-partial-file 使用教程

    前言 Node.js 经过多年的发展已经成为一种非常流行的服务器端技术，同时也涌现了大量的优秀的 npm 包，方便了我们的编程和开发。handlebars-partial-file 就是其中之一，它是...

    3 年前
  • npm 包 stringularity-type-utils 使用教程

    随着前端技术的不断发展，我们的工作中常常需要处理各种不同的数据类型。而在 JavaScript 中，处理数据类型可能会有些棘手，特别是涉及到与数据类型有关的某些操作时。

    3 年前
  • npm 包 babel-plugin-unpkg-rewrite 使用教程

    什么是 babel-plugin-unpkg-rewrite ? babel-plugin-unpkg-rewrite 是一个用于将 npm 包中的导入（import）语句重写为 unpkg CDN ...

    3 年前
  • npm 包 @sebathomson/platzom-platzi 使用教程

    在前端开发中，我们经常需要对字符串进行处理，特别是在国际化应用中。_@sebathomson/platzom-platzi_ 是一个 npm 包，提供了一种简单易用的方式来转换和处理西班牙语字符串。

    3 年前

相关推荐

    暂无文章