IT技术 - FlatList 的 Horizontal 效果不佳 - React Native？ - 吾爱随笔录

我在主屏幕上有 4 个 FlatList，它运行良好，

我将项目渲染为卡片“图像，名称”，我水平渲染项目，它工作正常，但是当我向右/向左滑动时，我看到一些有线的东西，比如它们让我回到第一个项目或在另一个项目之前渲染项目“一些落后”，

我不知道为什么！但是当我删除horizontal它时，它运行良好，没有任何问题！

任何机构对这个问题有解释吗？

顺便说一下，我从 API 获得了数据，而且数据很大 :)

示例代码

class Home extends PureComponent {
.....
  render() {
  <View style={styles.container}>
    <ScrollView>
    <View style={{marginVertical: 10}}>
     <FlatList
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            data={data.recent_tracks}
            contentContainerStyle={{flexGrow: 1}}
            ListEmptyComponent={<EmptyList />}
            keyExtractor={(track, index) => track.id.toString()}
            initialNumToRender={10}
            renderItem={this._renderItem}
    />
   </View>
  </ScrollView>
 </View>
....
  }
}

我在日志中得到了这个，虽然我使用PureComponent和react-native-fast-image For Images

VirtualizedList：您有一个更新缓慢的大列表 - 确保您的 renderItem 函数呈现遵循 React 性能最佳实践的组件，如 PureComponent、shouldComponentUpdate 等。{dt: 1393, prevDt: 2471, contentLength: 3669.818115234375}

import React, { Component } from "react"; import { FlatList, Text } from "react-native"; import { Card } from "react-native-elements"; const recent_tracks= [ ]; export default class App extends Component { constructor(props) { super(props); this.state = { recent_tracks: recent_tracks }; } render() { return ( <FlatList data={this.state.recent_tracks} renderItem={({ item: rowData }) => { return ( <Card title={null} image={{ uri: "http://via.placeholder.com/160x160" }} containerStyle={{ padding: 0, width: 160 }} > <Text style={{ marginBottom: 10 }}> hello </Text> </Card> ); }} keyExtractor={(item, index) => index} /> ); } }

FlatList 的 Horizo​​ntal 效果不佳 - React Native？

FlatList 的 Horizontal 效果不佳 - React Native？