极速编程 native-react（Four）

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

PanResponder

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

import Icon from 'react-native-vector-icons/Ionicons'

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

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

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

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

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