ScrollView 内的 FlatList 不滚动

Question

我有 4 FlatList s 与 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>}
      />
    );
  }
}

小吃博览会链接

原文由 theapache64 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我们可以为子 FlatList/ScrollView 组件使用内置的 nestedscrollenabled 属性。

 <FlatList nestedScrollEnabled />

这仅对 Android 是必需的（iOS 默认支持嵌套滚动）。

原文由 rnk 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我遇到了一个非常相似的问题，直到我在对 react-native 项目的一个 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>
    );
  }
}

希望你觉得这很有用！

原文由 Eric Le Fort 发布，翻译遵循 CC BY-SA 4.0 许可协议