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 link

Answer 1

在遇到一个几乎完整的解决方案之前，我遇到了一个非常相似的问题，它对本机项目https://github.com/facebook/react-native/issues/1966#issuecomment-285130701的GitHub问题提出了非常有帮助的评论。

问题在于父组件是唯一注册滚动事件的组件。解决方案是根据印刷机的位置，根据实际情况确定哪个组件应该实际处理该事件。

您需要稍微修改一下结构，以：

Reçue: /connexion .
POST reçu -----------------------------4511735334446617171533446239
Content-Disposition: form-data; name="pseudo"
 
Nath
-----------------------------4511735334446617171533446239
Content-Disposition: form-data; name="mdp"
 
moi
-----------------------------4511735334446617171533446239--
.

我唯一需要从GitHub注释中更改的就是使用<View> <ScrollView> <View> <FlatList/> </View> <View> <FlatList/> </View> <View> <FlatList/> </View> <View> <FlatList/> </View> </ScrollView> </View>而不是this._myScroll.contentOffset。

我已经修改了您的完整示例，允许滚动内部FlatList。

this.refs.myList.scrollProperties.offset

希望您发现这很有用！

Answer 2

使用https://facebook.github.io/react-native/docs/scrollview#nestedscrollenabled

有一个更简单的解决方案

这仅适用于Android（即使没有它，iOS也可以正常工作）。

只需确保在父和子ScrollViews（或子FlatList）中启用此道具。

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 对我有用。

ScrollView中的FlatList不滚动

6 个答案: