FlatList внутри ScrollView не прокручивается

Question

У меня 4 FlatList с, для maxHeight установлено 200 внутри ScrollView.

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

и когда я пытаюсь прокрутить FlatList, он не прокручивается, а ScrollView прокручивается. Как мне исправить эту проблему?

Полный исходный код

import { Component, default as React } from 'react';
import { FlatList, ScrollView, Text } from 'react-native';

export  class LabScreen extends Component<{}> {
  render() {
    return (
      <ScrollView>
        {this.renderFlatList('red')}
        {this.renderFlatList('green')}
        {this.renderFlatList('purple')}
        {this.renderFlatList('pink')}
      </ScrollView>
    );
  }

  getRandomData = () => {
    return new Array(100).fill('').map((item, index) => {
      return { title: 'Title ' + (index + 1) };
    });
  };

  renderFlatList(color: string) {
    return (
      <FlatList
        data={this.getRandomData()}
        backgroundColor={color}
        maxHeight={200}
        marginBottom={50}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text>{item.title}</Text>}
      />
    );
  }
}

закуска.экспо ссылка

Answer 1

Существует более простое решение с использованием https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

Это требуется только для Android (iOS работает, как и ожидалось, даже без нее).

Обязательно включите эту опору в и parent и дочерних ScrollViews (или дочерних FlatLists).

Answer 2

У меня была очень похожая проблема, пока я не наткнулся на почти законченное решение в очень полезном комментарии по одной из проблем GitHub для реактивного проекта: https://github.com/facebook/react-native/issues/1966#issuecomment-285130701.

Проблема в том, что только родительский компонент регистрирует событие прокрутки. Решение состоит в том, чтобы контекстно решить, какой компонент должен фактически обрабатывать это событие, основываясь на расположении прессы.

Вам нужно будет немного изменить структуру:

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

Единственное, что мне пришлось изменить в комментарии GitHub, - это использовать this._myScroll.contentOffset вместо this.refs.myList.scrollProperties.offset.

Я изменил ваш полностью рабочий пример таким образом, чтобы можно было прокручивать внутренние FlatLists.

import { Component, default as React } from 'react';
import { View, FlatList, ScrollView, Text } from 'react-native';

export default class LabScreen extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = {enableScrollViewScroll: true};
  }

  render() {
    return (
      <View
      onStartShouldSetResponderCapture={() => {
          this.setState({ enableScrollViewScroll: true });
      }}>
      <ScrollView
      scrollEnabled={this.state.enableScrollViewScroll}
      ref={myScroll => (this._myScroll = myScroll)}>
        {this.renderFlatList('red')}
        {this.renderFlatList('green')}
        {this.renderFlatList('purple')}
        {this.renderFlatList('pink')}
      </ScrollView>
      </View>
    );
  }

  getRandomData = () => {
    return new Array(100).fill('').map((item, index) => {
      return { title: 'Title ' + (index + 1) };
    });
  };

  renderFlatList(color: string) {
    return (
      <View
        onStartShouldSetResponderCapture={() => {
          this.setState({ enableScrollViewScroll: false });
          if (this._myScroll.contentOffset === 0
            && this.state.enableScrollViewScroll === false) {
            this.setState({ enableScrollViewScroll: true });
          }
        }}>
      <FlatList
        data={this.getRandomData()}
        backgroundColor={color}
        maxHeight={200}
        marginBottom={50}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => <Text>{item.title}</Text>}
      />
      </View>
    );
  }
}

Надеюсь, вы найдете это полезным!