无涯教程网

Reactnative React Native：使用选项卡动画收缩标题

发布于08月18日

球门

我正在try 创建一个带有动画收缩标题的视图，其中包含一个包含滚动内容的选项卡的选项卡视图.

安装程序

我正在使用带有TabNavigator的react-navigation .标题是具有固定高度的组件，当前位于TabNavigator上方.标题一直固定在标签上方，占用了宝贵的空间.

try 过的方法

我试了Janic Duplessis Blog Post次，但因为标签的缘故，我没法用.
我还try 用两个ScrollView/FlatList实现它:一个环绕整个视图，另一个环绕内容，但当到达滚动边缘时，我无法让react native进行传播.

预期效果与Google Playstore 中的效果相同.

推荐答案

我用Animated.diffClamp实现了这一点——你可以查看代码here.我写了一篇文章更详细地解释了代码here

*我正在为UI组件使用本机基本包(以简化UI代码)，但动画插值/定义在使用或不使用它时是相同的.

React-native相关问答推荐

如何根据设备主题更改React Native中状态栏的背景？

使用 Auth Token 标头react 本机图像，如何处理 401？

react native 如何更新倒置平面列表的数组中的项目

从 React 原生 Js 代码调用 Android Native UI 组件方法

react-native StyleSheet 属性和选项列表

在 iOS 模拟器中运行 React Native 应用程序时找不到 UMModuleRegistryAdapter.h

如何在 Crashlytics (Fabrics) 中有效地对非致命异常进行分组？

命令失败：gradlew.bat installDebug error whenever installing dependencies like navigation, firebase, icons etc in React-Native

使用 React Navigation 制作离开屏幕的动画

SyntaxError： const 声明中缺少初始化程序

如何使用 Typescript 在无状态组件上设置 navigationOptions

require() 必须有一个字符串文字参数 React Native

使用 expo SDK react-native ios 应用程序的 Info.plist 文件

尽管 TypeScript 编译器错误，为什么我的 React Native 应用程序构建成功？

I18nManager.forceRTL 不会在首次应用加载时应用更改

为react-native TextInput 设置边框

更改导航标题背景 colored颜色

react-native-webview ：对于 iOS 文本太小

如何构建一个 react-native 应用程序，以便它在 ipad 上作为 ipad 应用程序运行？

将现有的 React Native 项目转换为 Expo

实用课程推荐

相关教程推荐