react-native - 为什么当我选择一个项目时 FlatList 会滚动到顶部

Question

我有一个FlatList物品TouchableOpacity。当我尝试选择一个项目时，列表滚动到顶部。

这是Collapsible内容；

    const setBrandSelected = index => {
    var temp = JSON.parse(JSON.stringify(tempFilterOptions));
    temp[0].enums[index].selected = !temp[0].enums[index].selected;
    setTempFilterOptions(temp);
    };

    const FilterOptionBrand = () => {
    const RenderBrand = ({ item, index }) => {
      return (
        <TouchableOpacity onPress={setBrandSelected.bind(null, index)}>
          {item.selected && (
            <View style={[styles.brandImage, styles.selectedBrandImage]}>
              <Icon iconName={iconNames.Tick} />
            </View>
          )}
          <FastImage source={{ uri: item.logo }} style={styles.brandImage} resizeMode={FastImage.resizeMode.contain} />
          <Text style={styles.brandName}>{item.name}</Text>
        </TouchableOpacity>
      );
    };

    const BrandSeparator = () => <View style={styles.brandSeparator} />;

    return (
      <View style={styles.filterBrandMainContainer}>
        <View style={styles.searchBrandContainer}>
          <View style={styles.magnifyingGlassWrapper}>
            <Icon iconName={iconNames.MagnifyingGlass} />
          </View>
          <TextInput style={styles.searchBrandInput} placeholder={searchBrandText} />
        </View>
        <FlatList
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          keyExtractor={(item, index) => String(item.id)}
          style={styles.collapsibleContainer}
          data={tempFilterOptions[0].enums}
          renderItem={RenderBrand}
          ItemSeparatorComponent={BrandSeparator}
        ></FlatList>
      </View>
    );
    };

Answer 1

如果你以某种方式偶然发现了这个问题。答案是出现问题的任何地方，无论是页眉还是页脚。您应该调用组件函数，而不是直接键入函数。

const Header = () => <View />

正确使用；

ListHeaderComponent={Header()}

使用不当；

ListHeaderComponent={Header}