FlatList‘t不滚动

Question

我在一个FlatList中设置了4个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>}
      />
    );
  }
}

snack.expo链路

Answer 1

我们可以使用内置的启用嵌套滚动道具来支持子程序FlatList/ScrollView组件。

<FlatList nestedScrollEnabled />

这仅适用于Android (默认情况下，iOS支持嵌套滚动)。

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>
    );
  }
}

希望你能找到有用的东西！

Answer 3

这是最简单的答案，需要零配置。它就像一种魅力

<ScrollView horizontal={false}>
    <ScrollView horizontal={true}>
        <Flatlist
          ....
          ....
        />
    </ScrollView>
</ScrollView>