ScrollView 内的 FlatList 不滚动

Question

我有 4 个FlatLists，maxHeight 在ScrollView 中设置为200。

<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 link

Answer 1

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

<FlatList nestedScrollEnabled />

这仅适用于 Android（iOS 默认支持嵌套滚动）。

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

希望你觉得这很有用！

Answer 3

尝试将 FlatList 设置为嵌套

nestedScrollEnabled={true}

Answer 4

我解决了嵌套FlatList 无法通过简单地导入FlatList 在android 上滚动项目的问题

import { FlatList } from 'react-native-gesture-handler';

如果这不起作用，也尝试导入ScrollView。

import { ScrollView } from 'react-native';
// OR
import { ScrollView } from 'react-native-gesture-handler';

您需要尝试使用这些导入，至少它在我的情况下有效。

Answer 5

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

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

Answer 6

使用带有 flex:1 的 View 而不是 ScrollView 对我有用。

Answer 7

使用 ma​​p 代替 Flatlist，结果相同且不会破坏应用程序

Minha conta

   {
      buttonsProfile.map(button => (
         <ArrowButton 
              key={button.key}
              title={button.title}
              iconName={button.icon} 
              toogle={button.toogle}
              onPress={() => {navigation.navigate(button.route)}}
          />
      ))
    }