今天继续分享如何使用 react-native 丰富我们应用, 之前分享如何使用 react-navigation 创建我们应用导航, 以及使用 fetch 获取服务端数据, flatList 展示产品列表. 我们基础页面结构搭建好, 我们还需要一些像转场动画这样效果来丰富我们界面, 我们是使用 Animated,PanRespondor API 来实现想要的动画效果
PanResponder
看一看这个界面我们做一些调整, 这次我们用的 icon 不是 awesomeFont 而是 iconicons 看起来是不是更优雅一些.
import Icon from 'react-native-vector-icons/Ionicons'
每个页脚导航标签的配置如下代码, 供参照.
下面看一看, 着部分是可以横向滚动内容, 这里有许多推荐课程供您选择, 这种展现方式很常见, 具体实现如下面的代码, 我就不做过多解释了.
标签部分也做了处理, 当您向上滑动页面, 着部分内容会被收起, 这种效果是不是也很常见. 具体实现代码如下, 大家感兴趣可以看一看
看一看这我们对标题栏也做了动画, 当向上滑动时, 标题栏高度缩小, 同时用户头像和用户名会隐藏, 而页面标题会出现, 如上图
好今天就到这里, 内容很多, 还只是介绍个大概, 如果大家更兴趣, 给我留言我会就具体内容给为大家分享
来源: http://www.jianshu.com/p/bf3f1c53a313