在React Native中的ScrollView中滚动FlatList

Question

I have a FlatList inside a View , and the View is at the end of a ScrollView , I want to scroll the FlatList while the whole scroll at the end of the page. But I can't do that. So what should I do to let my FlatList have the ability to scroll while inside a ScrollView ? The body is like this:

<ScrollView>
  <View/>
  <View/>
  <View>
    <View/>
    <FlatList/>
  </View>
</ScrollView>

Answer 1

You can solve this issue by adding some code in to View which wraps the ScrollView and the another View which wraps the FlatList

So first of all define a user define variable in state inside the constructor.

this.state={
    .....
    enableScrollViewScroll : false
    ....
 }

Then add following code as a props to the View which wrap the ScrollView

onStartShouldSetResponderCapture={() => {
  this.setState({ enableScrollViewScroll: true });
}}

Add scrollEnabled={this.state.enableScrollViewScroll} prop to ScrollView

And Finally add following to the View which wraps the FlatList( immediate parent )

onStartShouldSetResponderCapture={() => {
   this.setState({ enableScrollViewScroll: false });

  if (this.refs.myList.scrollProperties.offset === 0 && 
     this.state.enableScrollViewScroll === false) {
     this.setState({ enableScrollViewScroll: true });
 }
}}

Here myList is the referance of FlatList