ScrollView 内的 FlatList 不滚动 [英] FlatList inside ScrollView doesn't scroll

问题描述

我在 ScrollView 中有 4 个 FlatList，其中 maxHeight 设置为 200.

I've 4 FlatLists with maxHeight set to 200 inside a ScrollView.

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

当我尝试滚动 FlatList 时，它不会滚动，但 ScrollView 会滚​​动.我该如何解决这个问题?

and when I try to scroll a FlatList, it doesn't scroll but the ScrollView scrolls. How do I fix this issue ?

完整源代码

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 链接

推荐答案

我们可以使用内置的 nestedscrollenabled 子项 FlatList/ScrollView 组件.

We can use the built-in nestedscrollenabled prop for the children FlatList/ScrollView components.

<FlatList nestedScrollEnabled />

这仅适用于 Android(iOS 上默认支持嵌套滚动).

This is only required for Android (Nested scrolling is supported by default on iOS).

这篇关于ScrollView 内的 FlatList 不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！