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：你有一个更新缓慢的大列表 - make 确保您的 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 = {
      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}
      />
    );
  }
}

try this answer

如有疑问，请随意，希望对您有所帮助