所以,我在平面列表中使用了一个分隔符。我把分隔符链接到了一个记录函数,这个函数记录平面列表中每一项的键。当我重新加载应用程序时,前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
这种行为是可以避免的吗?如果不是,这种行为会在生产模式中持续吗?
1条答案
按热度按时间dxxyhpgq1#
如果要在每隔一组项之间而不是每隔10项之间呈现ItemSeparatorComponent,则可以使用传递给ItemSeparatorComponent的itemIndex属性来确定何时呈现分隔符。例如,可以使用以下代码在每隔一组项之间呈现ItemSeparatorComponent:
此代码将在列表中每隔20项之间(即,第0项、第20项、第40项等)呈现ItemSeparatorComponent。您可以调整取模运算符(%)以更改呈现分隔符的频率。