react-native - React Native 滚动动画

问题描述

当我在 FlatList 中上下滚动时，HeaderArea 的高度不会改变它的高度！当我在页面下方滚动并查看平面列表中的项目时，HeaderArea 的大小需要从减小startHeaderHeight到endHeaderHeight. 请帮忙，你能发现我哪里出错了吗？

const START_HEADER_HEIGHT = (ITEM_HEIGHT/5);
const END_HEADER_HEIGHT  = (ITEM_HEIGHT/8);
const HEADER_SCROLL_DISTANCE =  START_HEADER_HEIGHT -  END_HEADER_HEIGHT;



     export default class MyClass extends Component {
        
       constructor(props) {
        super(props)

        this.state = {

            columns: 3, //Columns for Grid

             /***** Animated scrolling hide header info ****/
             scrollY:  new Animated.Value(0),

      
        };

    }
           
            render() {
         
                const animatedHeaderHeight = this.state.scrollY.interpolate({
                  inputRange: [0, HEADER_SCROLL_DISTANCE],
                  outputRange: [START_HEADER_HEIGHT, END_HEADER_HEIGHT],
                  extraploate: 'clamp'
                })

              return (
        
        
                 <SafeAreaView style={styles.profileContainer}> 
        
                        <View style={styles.flatStyle}> 
                          
                           <FlatList 

                            style={styles.scrollViewContent}    
                            numColumns={columns}
              
                            data={tempUserImagesArray}  //defined elsewhere

                            scrollEventThrottle={16}

                            onEndReached={()=>console.log('End reach')}
                            bounces={false}

                            onScroll={Animated.event(
                                [{nativeEvent:{contentOffset: {y: this.state.scrollY}}}],
                              
                         
                            )}
                                    keyExtractor={   (item, index) => { return index }   }
                                    renderItem=
                                           ..............
                                              />        
                                              )
                                      }} 
                                   
                           />
                         </View> 
                         <Animated.View style={[styles.infoArea, { height: animatedHeaderHeight }]}>             
                             //Plain Orange rectangle
                         </Animated.View>
                     
               </SafeAreaView>
          )
        }
        
        
        
 const styles = StyleSheet.create({
     profileContainer: {
          flex: 1,
        
 },
 infoArea: {
      //flex: 1,
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      backgroundColor: 'orange',
      overflow: 'hidden',
 },
 scrollViewContent: {
     marginTop: START_HEADER_HEIGHT,
     
 },

flatStyle：{宽度：'100％'，高度：START_HEADER_HEIGHT，flex：1}，HeaderArea：{

 },
 grid: {
     flex: 1,
     flexDirection: 'column',
 },
    
 });
}

我需要的更像是这样的：

标签： react-native

这是您的问题，您将 FlatList 嵌套在 ScrollView 中，当您的 FlatList 被渲染时，它将根据父视图的高度渲染项目数，并且......它的父级（ScrollView）具有无穷大的高度，因此 FlatList 中的所有内容都将是立即渲染，FlatList 将无法滚动。您正在滚动的组件是 ScrollView 而不是 FlatList，这就是您onScroll无用的原因。

顺便说一句，我认为您正在创建类似于标题折叠视图的内容，标题将在向上滚动时折叠，向下滚动时出现。我最近正在研究它，如果你的设计包含标签，你可以从这篇文章中得到这个想法。使用这个react-native-collapsible-tab-view，相信我，如果它包含标签，重新创建组件会让你大吃一惊。

react-native - React Native 滚动动画

问题描述

解决方案

推荐阅读