How do I scroll an entire screen that renders two flatLists?答案

【问题标题】：How do I scroll an entire screen that renders two flatLists?How do I scroll an entire screen that renders two flatLists?
【发布时间】：2022-12-01 14:18:25
【问题描述】：

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

【问题讨论】：

标签： reactjs react-native react-native-flatlist

【解决方案1】：

You can achieve this by replacing your View with ScrollView

<ScrollView style={{ alignItems: 'center', marginTop: 100, flex: 1 }}>
    <FlatListB />
    <FlatListA />
</ScrollView>

【讨论】：