使用 React Native 构建 Facebook Paper 类似的 UI

justjavac 发布于2019-08-20 10:26 / 3449人阅读

摘要：我模仿的应用构建了一个开闭卡片的轮播效果作为技术演示它使用了及其动画库当人们听到后第一反应会觉得它运行缓慢这是因为一般人会去这样解释它允许你通过构建你的应用程序而人们会认为浏览器中运行的性能并不够好但事实是它采用的全部都是原生界面元素但你通

我模仿 Facebook 的 Paper 应用构建了一个开闭卡片的轮播效果作为技术演示.它使用了 React Native 及其动画库.

当人们听到 React Native 后第一反应会觉得它运行缓慢.这是因为一般人会去这样解释 React Native: "它允许你通过 Javascript 构建你的应用程序",而人们会认为浏览器中运行的 JavaScript 性能并不够好.

但事实是,它采用的全部都是原生界面元素.但你通过 React Native 构建界面时, 每次都会实例化 Android 和 iOS 的原生 UI.因此,相比于比较沉重的 DOM 结构它是相当请轻量的.

下面一段介绍:我是如何着手构建类似 Facebook 的 Paper 应用的交互效果的. 我们可以放大和缩小轮播图,在动画进行的时候,我们也可以停止它.

先来看看它是什么样子：

上面的屏幕截图,是从我所构建的 App 中截出来的. 左边是当前缩小的卡片列表.您可以滑动它们.您也可以把它拉起来,让它们变成全屏. 现在你可以在全屏状态下滑动卡片,一个接一个. 我们来与下面 Facebook Paper应用的交互模型来进行比较.

点这里查看 Youtube 上的视频

我们以实例化两个状态变量开始.一个用于存储 pan 值,另一个存储动画进度:从0到1.这一进展变量是基于 pan 值进行插值.

let pan = new Animated.ValueXY();
this.state = {
  pan: pan,
  dockAnimation: pan.y.interpolate({
    inputRange: [-300, 0],
    outputRange: [0, 1],
  })
}

现在,我们需要创建一个 panResponder. 这是一个复杂的手势操控的概念,它判断什么时候应该激活手势以及们完成事件的各种方法.在我们的例子中,我们要在手势正在进行和结束对它进行跟踪.

this._panResponder = PanResponder.create({
  onStartShouldSetPanResponder: (evt, gestureState) => true,
  onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
  onMoveShouldSetPanResponder: (evt, gestureState) => true,
  onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
  onPanResponderGrant: () => {},
  onPanResponderMove: Animated.event([null, {dx: this.state.pan.x, dy: this.state.pan.y}]),
  onPanResponderRelease: (evt, gestureState) => {
    // dragging stopped, animate the item to the correct position
  }
})

在实际代码中可以看到看到 onPanResponderRelease 块的全部实现.它做的很简单:决定用户是否已经拖远远,并切换 state 的值.如果是,绘制这个动画.

transform: [{
  scale: this.state.dockAnimation.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0.5],
  })
}

多种变换被以 ListView 的 style 的方式应用. 我已经用 scale 变换作为例子展示了,再一次,我们使用插值来控制动画.

最后,styles 和 panResponder 的 panResponder 都被绑定到了 ListView. 需要注意的是在我们创建了一个一个组合式的 ListView: AnimatedListView,这样的动画库可以从样式对象解析出动画的值.

这就是我们需要为动画做的所有事情!剩下的就是使用 Flex 布局来构建那些漂亮的卡片.Jason Brown 写了一本有关React Native动画库的好书：http://browniefed.com/react-n...

我在 Github 上共享了所有的代码,你可以自由修改它！

paramaggarwal/rn-paper-interface

目前,我只在iOS上运行过.但是你可以尝试在 Android 上运行,并在 github 上打开一个 PR. 我没有用过任何的 iOS 特定的 API, 所以理论上,它应该在 Android 上工作.

作者信息
原文作者：Param Aggarwal
原文链接：http://t.cn/RtnSJwA
翻译自力谱宿云 LeapCloud旗下MaxLeap团队_UX成员：Jason
中文首发地址：https://blog.maxleap.cn/archi...
译者简介：MaxLeap UX 组负责人,负责前端开发,客户端/部分服务端 SDK 开发及开发者用户体验优化相关工作. 持续关注新技术,热爱产品, 热衷全栈/全端开发. 曾供职于搜狐搜狐武汉研究院,后投身 MaxLeap致力于为开发者提供快速高效的开发体验.

相关文章
ReactJS 开发过程中的一些使用心得
在 React Web 和原生 App 中共享代码
React Native 一周年回顾
React.js 最佳实践(2016)

作者往期作品：
在 React Web 和原生 App 中共享代码
React.js 最佳实践(2016)

活动预告

报名链接：http://t.cn/Rt9ooRw

欢迎关注微信公众号：MaxLeap_yidongyanfa

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80152.html

11个React Native 组件库和 Javascript 数据可视化库

摘要：数据可视化库超过的的可能是最流行和最广泛的数据可视化库。是一组组件，用于高效地渲染大型列表和表格数据。一种优雅而灵活的方式，可以利用组件来支持实际的数据可视化。想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！ React Native 组件库 1. NativeBase showImg(https://segmentfault.com/img/bVbrLHH?w=...

tangr206 2019-08-23 17:11 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0
2019年，Flutter 和 React Native 谁主沉浮?

摘要：移动行业渴望进行一场革命，以遏制移动应用程序开发过程中出现的问题。毫无疑问，它得到很好的回应。如今，是沃尔玛优步和特斯拉等应用程序的幕后支持者。由制作，而受社区青睐。然而，目前，的只有和支持。在提供灵活性和定制方面，显然处于领先地位。 Flutter 与 React Native混淆了吗？本文是帮助你了解这两个应用程序开发框架区别指南。咱们知道，几年前开发和维护iOS和Android...

xioqua 2019-08-23 18:04 评论0 收藏0
从 1 到完美，用 js 和 react-native 写一个 APP

摘要：从到完美，用和写一个在年开源了后，紧接着在年就又开源了，就此打开了用和前端技术写原生之路。对应来看，程序只有两个部分，和，而部分则分为组件和。所以，在端的纯库无在中同样适用，如等。应用实例便是使用开发的一个日记。从 1 到完美，用 js 和 react-native 写一个 APP facebook 在 2013 年开源了 react 后，紧接着在 2015 年就又开源了 react...

CollinPeng 2019-08-23 11:45 评论0 收藏0
2016-JavaScript之星

摘要：在，是当之无愧的王者，赢得了与之间的战争，攻陷了的城池。于月发布了版本，这一版本为了更好的表现加入了渲染方式。前端框架这个前端框架清单可能是年疲劳的元凶之一。的创建者，目前在工作为寻找构建简单性和自主配置性之间的平衡做了很大的贡献。春节后的第一篇就从这个开始吧~本文已在前端早读课公众号上首发原文链接 JavasScript社区在创新的道路上开足了马力，曾经流行过的也许一个月之后就过...

Binguner 2019-08-20 14:04 评论0 收藏0