项目分隔符组件React Native

oxiaedzo  于 2022-12-30  发布在  React
关注(0)|答案(1)|浏览(108)

所以,我在平面列表中使用了一个分隔符。我把分隔符链接到了一个记录函数,这个函数记录平面列表中每一项的键。当我重新加载应用程序时,前10项被记录,然后是前20项,等等......事实上,每10项,迭代就重新开始,从头开始的所有项都被记录。但是如果我只保存代码,应用程序被刷新,所有项目只记录一次,正如我所期望的。
下面是我代码:

import React from 'react';
import { Text, View, StyleSheet, TextInput, FlatList } from 'react-native';
import { Constants } from 'expo';
import { useState} from "react";

export default function App() {
  const [reviews, setReviews] = useState([
    {key:'1'},
    {key:'2'},
    {key:'3'},
    {key:'4'},
    {key:'5'},
    {key:'6'},
    {key:'7'},
    {key:'8'},
    {key:'9'},
    {key:'10'},
    {key:'11'},
    {key:'12'},
    {key:'13'},
    {key:'14'},
    {key:'15'},
    {key:'16'},
    {key:'17'},
    {key:'18'},
    {key:'19'},
    {key:'20'},
    {key:'21'},
    {key:'22'},
    {key:'23'},

  ])
  const separator=(e)=>{
    console.log(e.leadingItem.key)
  }
  return (
      <View >
        <FlatList
          ItemSeparatorComponent={(e)=>separator(e)}
          data={reviews}
          renderItem={({item}) => (
            <Text>{item.key}</Text>
          )}
        />
        
      </View>
    )

}

});

这里是当应用程序被重新加载时的日志

log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 21
log : 22

以下是应用程序刷新时的日志

log : 1
log : 2
log : 3
log : 4
log : 5
log : 6
log : 7
log : 8
log : 9
log : 10
log : 11
log : 12
log : 13
log : 14
log : 15
log : 16
log : 17
log : 18
log : 19
log : 20
log : 21
log : 22

这种行为是可以避免的吗?如果不是,这种行为会在生产模式中持续吗?

dxxyhpgq

dxxyhpgq1#

如果要在每隔一组项之间而不是每隔10项之间呈现ItemSeparatorComponent,则可以使用传递给ItemSeparatorComponent的itemIndex属性来确定何时呈现分隔符。例如,可以使用以下代码在每隔一组项之间呈现ItemSeparatorComponent:

function MyItemSeparator({ itemIndex }) {
  if (itemIndex % 20 === 0) {
    return <View style={styles.separator} />;
  }
  return null;
}

此代码将在列表中每隔20项之间(即,第0项、第20项、第40项等)呈现ItemSeparatorComponent。您可以调整取模运算符(%)以更改呈现分隔符的频率。

相关问题