标签: react-native-flatlist

我正在尝试在部分列表中呈现几个平面列表。最终目标是这样的：

但是，我似乎无法让它正确渲染。它多次渲染同一个项目。

            <SafeAreaView style={styles.container}>
                <SectionList
                    sections={posts}
                    keyExtractor={(item, index) => item + index}
                    renderItem={({ item }) => 
                        <FlatList
                            horizontal
                            data={posts}
                            renderItem={this.renderPosts}
                            keyExtractor={(item, index) => index}
                        />
                    }
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={styles.header}>{title}</Text>
                    )}
                />
            </SafeAreaView>





    renderPosts = (element) => {
        const { image, opinions, votes, name } = element.item;
        return (
            <Card>
                <Card.Cover source={{ uri: image }}/>
                <View>
                    <Card.Content>
                        <Title numberOfLines={1}>{name}</Title>
                    </Card.Content>

                    <Card.Content>
                        <Caption>{opinions} opinions</Caption>

                        <Headline style={{ fontSize: 10 }}>{votes}%</Headline>
                    </Card.Content>
                </View>
            </Card>
        )
    }

JSON …

请参阅可重现的演示或代码。

我尝试在react-native FlatList 上构建一个简单的可选择列表。该功能很简单：FlatList 中的每一行都是可选择的。如果尚未选择某行，则单击该行将选择该行；如果该行已被选中，单击该行将取消选择它。

我面临的问题是每次单击一行时，所有行都会重新渲染，这可以从日志中得知（例如“渲染项 id=cameron.nguyen@example.com, selected=false”）。我想避免重新渲染未更改的行，因为重新渲染可能会很昂贵（在我想要加载非常大的图像或列表很长的情况下），但不知道如何做。我已经尝试过两者，<MomoizedItem />但前者根本不会改变重新渲染行为，而后者则使应用程序的行为非常奇怪，您可以尝试替换为其中之一来查看效果。我也尝试使用over ，但它也没有帮助。<MemoizedItem2 />React.memo<Item />onClickCallBackonClick

是我使用不当React.memo还是React.useCallBack使用不当？我可以做什么来满足需求？谢谢。

如果代码链接过期，请粘贴以下代码：

import React, { memo, useEffect, useState } from "react";
import { SafeAreaView, FlatList, StyleSheet } from "react-native";
import Constants from "expo-constants";
import { Set } from "immutable";
import { Button, ListItem } from "react-native-elements";
import axios from "axios";

const Item = ({ id, title, avatarUrl, selected, onClick }) => {
  console.log(`rendering …

我已经从 Flipkart 的 Flatlist 切换到 RecyclerlistView。但是像 onload 和 onscroll 这样的事件存在一些行渲染闪烁问题，这看起来很奇怪。有人对此有任何解决办法吗？

这是代码：

           <RecyclerListView
 
                optimizeForInsertDeleteAnimations={true}
                // initialOffset={800}

                initialRenderIndex={0}
                scrollsToTop={false}
                showsVerticalScrollIndicator={false}

                style={{ paddingBottom: 90 }}
                forceNonDeterministicRendering={true}
                layoutProvider={this._layoutProvider}

                dataProvider={this.state.dataProvider}
                extendedState={this.state.dataProvider}

                rowRenderer={this._rowRenderer}

                disableRecycling={true}

                // shouldComponentUpdate={true}
                // shouldComponentUpdate={this.shouldComponentUpdateList()}


                onEndReached={this.onEndReached}
                onEndReachedThreshold={0.1}
                renderFooter={this._renderFooter}
                scrollViewProps={{
                    // contentContainerStyle: { paddingBottom: (140) },
                    // stickyHeaderIndices: [1],
                    refreshControl:
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={() => {
                                this._handleRefresh()
                            }}
                        />
                }}

            />

我正在尝试在平面列表中实现类似“onBeginReached”的道具。我想以对用户透明的方式在数据数组的开头附加一些数据。

所以使用这个 flatList ：

const App = () => {
  const flatListRef = useRef(null);
  const [data, setData] = useState(generateData(20));

  const renderItem = ({ item }) => {
  console.log(item);
  return (
    <View style={styles.itemContainer}>
      <Text style={styles.itemText}>{item}</Text>
    </View>
  );
};

  const handleMomentumScroll = (event) => {
    console.log("Momentum end")
    const xOffset = event.nativeEvent.contentOffset.x;
    const index = Math.round(xOffset / 30);

    if (index < 1) {
      setData([-10 ,-9, -8, -7, -6,-5, -3, -2, -1, ...data]);
    }
  };

  return (
    <FlatList
      style={{ width: 200, alignSelf: 'center', marginTop: …

描述

我在里面使用水平选项卡栏ListHeaderComponent，我想将其ListHeaderComponent作为SectionList中的粘性标题。我们可以在平面列表中制作粘性标题，但它在部分列表stickyHeaderIndices={[0]}中不起作用

React Native Environment Info:
    System:
      OS: macOS 10.14.6
      CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
      Memory: 38.35 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 12.15.0 - /usr/local/bin/node
      Yarn: 1.21.1 - /usr/local/bin/yarn
      npm: 6.13.4 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
      Android SDK:
        API Levels: 28, 29
        Build Tools: 28.0.3, 29.0.1, 29.0.2
        System Images: android-26 …