时间戳

首页 > 解决方案 > FlatList 的 Horizo​​ntal 效果不佳 - React Native？

javascript - FlatList 的 Horizo​​ntal 效果不佳 - 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

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

标签： javascriptandroidreactjsreact-native

解决方案

试试这个例子，让它工作

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

试试这个答案

有疑问请随意，希望对你有帮助

推荐阅读