FlatList的Horizo ntal不能很好地工作-React Native？

Question

我在主屏幕上有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，但我在日志中得到了这个

VirtualizedList：您的列表很大，更新速度很慢-确保您的renderItem函数渲染遵循React的组件性能最佳做法，例如PureComponent，shouldComponentUpdate，等等。{dt：1393，prevDt：2471，contentLength：3669.818115234375}

Answer 1

尝试此示例并使其正常工作

  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 = {
      data: data
    };
  }

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

毫无疑问，希望对您有所帮助