React Native：在Androdid中嵌套FlatLists时滚动时刷新卡住

Question

使用水平FlatList和其他垂直FlatList作为项目时，刷新似乎存在问题。在垂直列表上启用刷新但在水平容器列表上不启用刷新时会发生这种情况。如果你非常关心并且只是垂直滚动（这非常困难），实际上可以刷新每个单独的列表。但是你立刻向侧面滚动，令人耳目一新。

• React Native嵌套FlatLists
• Android中的问题。适用于iOS

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

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

示例：

 <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>}
                />
            }
        />

有没有人有解决方案？

Answer 1

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

Answer 2

我根据您对问题的理解创建了一个组件， 根据需要设置第二个平面列表的宽度，并将高度设置为“ 100％”，以便全屏显示，使其表现得像分页2个平面列表...希望它适用于u

这是代码 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>
    );
  }
}