2

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

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

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

我也尝试过对这个类似问题的赞成答案，但它没有解决它。

刷新符号和进程卡住了

例子：

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

有人对此有解决方案吗？

4

2 回答 2

0

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

于 2020-02-19T03:54:28.270 回答
0

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

这是代码 小吃网址

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>
    );
  }
}
于 2020-02-19T05:47:40.167 回答