极速编程 native-react

今天继续分享如何使用 react-native 丰富我们应用,之前分享如何使用 react-navigation 创建我们应用导航,以及使用 fetch 获取服务端数据,flatList 展示产品列表。我们基础页面结构搭建好,我们还需要一些像转场动画这样效果来丰富我们界面,我们是使用 Animated,PanRespondor API 来实现想要的动画效果

PanResponder

看一看这个界面我们做一些调整,这次我们用的 icon 不是 awesomeFont 而是 iconicons 看起来是不是更优雅一些。

importIconfrom'react-native-vector-icons/Ionicons'

每个页脚导航标签的配置如下代码,供参照。

下面看一看,着部分是可以横向滚动内容,这里有许多推荐课程供您选择,这种展现方式很常见,具体实现如下面的代码,我就不做过多解释了。

标签部分也做了处理,当您向上滑动页面,着部分内容会被收起,这种效果是不是也很常见。具体实现代码如下,大家感兴趣可以看一看

看一看这我们对标题栏也做了动画,当向上滑动时,标题栏高度缩小,同时用户头像和用户名会隐藏,而页面标题会出现,如上图

好今天就到这里,内容很多,还只是介绍个大概,如果大家更兴趣,给我留言我会就具体内容给为大家分享

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180624B0ST3N00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券