RN如何实现 View + FlatList 同时存在的情况下,既可以滑动List,又可以滑动整个页面?

clipboard.png

布局是这样的:
上面一个View展示个人信息,中间一个Tab组件,Tab组件传入一个FlatList
(重点是有个Tab组件)

但这样只能滚动FlatList,就是上半部分的页面不会滚动。试过最外层用ScrollView包起来,不行,因为FlatList的高度不够,不足以把ScrollView撑起来。

想实现:让它们看起来像是一个页面那样子滚动。
目前我是这么解决的:监听FlatList的onScoll,再利用Animated动画,动态设置上半部分Viewtop样式值。但看起来不流畅。

该页面源码### 问题描述

阅读 3.8k
评论
    3 个回答

    亲测把flatlist 放在scrollview 里面可行:

    图片描述

    代码:

    const datas = [];
    for (let i = 0; i < 100; i++) {
      datas.push(i);
    }
    
    ...
    
    <ScrollView>
      <View style={{ height: 300, backgroundColor: '#f00' }}></View>
      <FlatList
        renderItem={({ item }) => {
          return (
            <Text style={{ height: 50, lineHeight: 50, textAlign: 'center', backgroundColor: '#eee', marginTop: 8 }}>
              {item}
            </Text>
          )
        }}
        data={datas}
      />
    </ScrollView>
      相似问题
      推荐文章