React Native：Animate缩小标题的标题 [英] React Native: Animate shrinking header with tabs

问题描述

目标

我尝试创建一个带有动画缩小标题的视图，其中tabview包含带滚动内容的标签。
见图片。

设置

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

尝试过的方法

• 我试过

  解决方案

  我设法用<$ c实现了这个$ c> Animated.diffClamp - 您可以查看代码

  
  

  Goal

  Im trying to create a view with an animated shrinking header with a tabview that contains tabs with scrolling content. See Image.

  Setup

  I'm using react-navigation with a TabNavigator. The header is a component with a fixed height, currently above the TabNavigator. The header is fixed above the tabs all the time taking precious space.

  Tried Approaches

  • I've tried Janic Duplessis Blog Post but I can't get it to work because of the tabs.

  • I've also tried implementing it with two ScrollView/FlatList: One wrapped around the whole view and one wrapping the content but I can't get react native to propagate the scroll edge is reached.

  The desired effect is the same as in the Google Play store.

  解决方案

  I managed to implement this with Animated.diffClamp - you can check out the code here. I've written an article explaining the code more in detail here

  *I'm using the native-base package for UI components (to simplify UI code), but the animation interpolations/definitions are the same with or without it.

  这篇关于React Native：Animate缩小标题的标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！