React Native：在Android的嵌套FlatList中滚动时刷新卡住了答案

【问题标题】：React Native: Refreshing gets stuck while scrolling in nesting FlatLists in AndrodidReact Native：在Android的嵌套FlatList中滚动时刷新卡住了
【发布时间】：2017-04-12 21:33:19
【问题描述】：

在使用水平 FlatList 和其他垂直 FlatList 作为项目时，刷新似乎存在问题。当在垂直列表上启用刷新但在水平容器列表上未启用刷新时，会发生这种情况。如果您非常小心并且仅垂直滚动（这非常困难），则实际上可以刷新每个单独的列表。但是一旦你横向滚动，刷新就会卡住。

React Native 嵌套 FlatLists
Android 中的问题。在 iOS 中工作

尝试我尝试用 ScollView 替换包装的 FlatList，结果相同。我完全意识到可以禁用单个列表的刷新并在包含的 FlatList 上启用它，但这在我的情况下不太合适。

我也尝试了this similar question 上的赞成答案，但没有解决。

例子：

 <FlatList
            horizontal={true}
            pagingEnabled={true}
            data={[{key: 'a'}, {key: 'b'}]}
            renderItem={({item}) =>
                <FlatList
                    style={{width: 400}}
                    ref="scrollView"
                    horizontal={false}
                    refreshing={false}
                    onRefresh={() => {}}
                    data={[{key: 'c'}, {key: 'd'}]}
                    renderItem={({item}) =>  <Text>{item.key}</Text>}
                />
            }
        />

有没有人可以解决这个问题？

【问题讨论】：

您找到解决方案了吗？
我想我最终将一堆 FlatList 放在一个 ScrollView 中

标签： react-native react-native-scrollview react-native-flatlist

【解决方案1】：

从 react-native-gesture-handler 导入的 ScrollView/Flatlist 在屏幕外释放时可能会卡住刷新。从 react-native 使用 ScrollView 导入

【讨论】：

【解决方案2】：

我根据我从你的问题中理解的内容创建了一个组件，根据您的需要制作第二个平面列表宽度并将高度设置为“100%”，这样它将全屏显示，因此它的行为就像分页 2 个平面列表...希望它适用于您

这里是代码 Snack URL

import React, {Component} from 'react';
import {
  View,
  Text,
  Image,
  TouchableOpacity,
  FlatList,
  Dimensions,
} from 'react-native';

const { width } = Dimensions.get('window');
export default class App extends Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FlatList
          horizontal
          pagingEnabled
          data={[{ key: 'a' }, { key: 'b' }]}
          renderItem={({ item }) => (
            <FlatList
              style={{ width, height: '100%' }}
              // ref="scrollView"
              horizontal={false}
              refreshing={false}
              onRefresh={() => {}}
              data={[{ key: 'c' }, { key: 'd' }, { key: 'f' }, { key: 'h' }]}
              renderItem={({ item }) => (
                <Text style={{ paddingVertical: 40 }}>{item.key}</Text>
              )}
            />
          )}
        />
      </View>
    );
  }
}

【讨论】：