在 ScrollView 问题中反应 Native FlatList

Question

I have the following issue, FlatList is rendered inside ScrollView, and everything seems to fine except that while FlatList scrolling the buttons in ScrollView are not responding.

Structure is something like this:

ScrollView - vertical Button ListView - horizontal ScrollView

Answer 1

The issue with using a FlatList inside a ScrollView is that the FlatList will not be able to scroll independently of the ScrollView. This is because the ScrollView will intercept the touch events intended for the FlatList and prevent the FlatList from scrolling.

On solution is to enable nestedScrollEnabled prop on the ScrollView, and set it to true. This will allow the FlatList to receive the touch events and scroll independently of the ScrollView.

<FlatList nestedScrollEnabled />

Another You can also try this solution

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
<View>
    <Text>Some fixed content</Text>
  </View>
  <FlatList
    data={data}
    keyExtractor={item => item.id}
    renderItem={({ item }) => <Text>{item.name}</Text>}
  />
</ScrollView>

Or you can try this solution of using map instead of flatlist

<ScrollView contentContainerStyle={{ flexGrow: 1 }}>
    <View>
      {data.map(item => (
        <View key={item.id}>
          <Text>{item.name}</Text>
        </View>
      ))}
    </View>
    </ScrollView>