如何滚动呈现两个 flatList 的整个屏幕？

Question

I have two flatLists nested inside of a scrollView so I am able to scroll my entire page. However, I know that you are not supposed to nest flatLists in scrollViews for multiple reasons.

How can I render two flatLists while still being able to scroll throughout the entire page? The GIF at the bottom of the post is the desired behavior I want.

I created a snack post here as well as provided some example code below.

export default function App() {

  return (
    <View style={{ alignItems: 'center', marginTop: 100, flex: 1}}>
        <FlatListB/>
        <FlatListA/>
    </View>
  );
}

  return (
    <FlatList
      data={newData}
      renderItem={renderItem}
      onEndReached={fetchMoreBars}
      onEndReachedThreshold={0.1}
    />
  );

  return (
    <FlatList
      data={newData}
      renderItem={renderItem}
      onEndReached={fetchMoreBars}
      onEndReachedThreshold={0.1}
      horizontal={true}
    />
  );

https://giphy.com/gifs/7V07FvYyn8ZG3nwVVU - This GIF was created by nesting FlatListB and FlatListA in a ScrollView

Answer 1

If you would like to prevent nested flatLists in scrollView, you may use ListHeaderComponent props in FlatList.

FlatListA.js :

 <FlatList
   data={newData}
   renderItem={renderItem}
   onEndReached={fetchMoreBars}
   onEndReachedThreshold={0.1}
   ListHeaderComponent={<FlatListB />}
 />

App.js

export default function App() {
  return (
    <FlatListA/>
  );
}

This should work if 2 flatlists are not scrolling in same direction (Vertical / Horizontal).

Answer 2

try this code

 const Data = [1,2,3,4,1,1,1,1,1,1,1,]
const Horizontal = () => {
    const Data = [1,2,3,4,1,1,1]
    return <FlatList
        horizontal
        data={Data} renderItem={() => {
        return <View style={{height:100,width:100,backgroundColor:'pink',margin:2}}>
        </View>
    }}/>
}
const ListHeaderComponent = () => {
    return  <Horizontal/>
}
<View >
    <FlatList
        ListHeaderComponent={ListHeaderComponent}
        data={Data} renderItem={() => {
        return <View style={{height:100,width:100,backgroundColor:'white',margin:2}}>
        </View>
    }}/>
</View>