Question

当我在 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,
     
 },

平面样式：{ 宽度: '100%', 高度：START_HEADER_HEIGHT，弹性：1 }, 标题区域：{

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

我更需要的是这样的：

Answer 1

这是你的问题，你在 ScrollView 中嵌套 FlatList，当你的 FlatList 被渲染时，它会根据父视图的高度渲染项目的数量...... FlatList 将立即呈现并且 FlatList 将不可滚动。您正在滚动的组件是 ScrollView 而不是 FlatList，这就是您的 onScroll 没用的原因。

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

反应原生滚动动画

1 个答案: