onViewableItemsChanged 回调不正确

来源：7-13 FlatList 高性能列表组件

西瓜一号

2024-06-25

import React, { useEffect, useRef } from "react";
import { FlatList, StyleSheet, Text, View } from "react-native";

export default () => {

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41];

const renderItem = ({ item, index }) => {
return (
<Text style={s.txt}>{`list item ${item}`}</Text>
);
};

const renderItem2 = ({ item, index }) => {
return (
<Text style={s.txt2}>{`list item ${item}`}</Text>
);
};

const ListHeader = (
<View style={[s.txt, s.headAndFoot]}>
<Text style={s.headAndFootText}>列表头部</Text>
</View>
);

const Listfooter = (
<View style={[s.txt, s.headAndFoot]}>
<Text style={s.headAndFootText}>列表尾部</Text>
</View>

);



const flatListRef = useRef(null)
// useEffect(() => {
//     setTimeout(() => {
//         flatListRef.current.data = data
//     }, 2000);
// }, []);

const Listempty = (
< View style={s.listEmpty} >
<Text style={{ color: '#666666' }}>暂时无数据哦~</Text>
</View >);

return (
<FlatList style={s.root}
ref={flatListRef}
data={data}                 //数据源
renderItem={renderItem}     //每隔元素样式
keyExtractor={(_, index) => { `item - ${index}` }}        //唯一标识符

// scroll 属性
contentContainerStyle={s.containerStyle}
showsVerticalScrollIndicator={false}
onScroll={(event) => {
console.log(event.nativeEvent.contentOffset.y);
}}
keyboardDismissMode='on-drag'
keyboardShouldPersistTaps='never'

// 表头 表尾
ListHeaderComponent={ListHeader}
ListFooterComponent={Listfooter}

//无数据显示view 占位样式
ListEmptyComponent={Listempty}
// 分隔 样式组件
ItemSeparatorComponent={<View style={s.separator}></View>}

//初次渲染数量 一般超过一屏,用于长列表优化性能
initialNumToRender={15}

//反向渲染
inverted={false}
//多列排布 瀑布流
numColumns={1}

// 回调 当前屏幕显示的item数组
onViewableItemsChanged={(info) => {
const { viewableItems } = info;
console.log(viewableItems);
console.log('Changed items:', info.changed);
}}


>
</FlatList>

// <FlatList style={s.root}
//     data={data}                 //数据源
//     renderItem={renderItem2}     //每隔元素样式
//     keyExtractor={(_, index) => {`item - ${index}`}}        //唯一标识符
//     horizontal={true}
//     showsHorizontalScrollIndicator={false}
// >
// </FlatList>







);
};


const s = StyleSheet.create({

root: {
width: '100%',
height: '100%',
backgroundColor: 'gray',
},

txt: {
width: '100%',
height: 56,
fontSize: 32,
color: 'black',
textAlignVertical: 'center',
textAlign: 'center',
// marginTop: 10,
backgroundColor: 'pink',
},

headAndFoot: {
backgroundColor: 'yellow',
},

headAndFootText: {
textAlignVertical: 'center',
textAlign: 'center',
fontSize: 34,
height: '100%',
backgroundColor: '#d3f8c4'
},

txt2: {
width: 200,
height: 200,
fontSize: 32,
color: 'black',
textAlignVertical: 'center',
textAlign: 'center',
marginLeft: 10,

backgroundColor: 'yellow',
},

containerStyle: {
paddingHorizontal: 16,
paddingTop: 10,
backgroundColor: 'green',
},

listEmpty: {
width: '100%',
height: 400,
justifyContent: 'center',
backgroundColor: 'pink',
textAlignVertical: 'center',
alignItems: 'center',

},

separator: {
width: '100%',
height: 1,
backgroundColor: '#d0d0d0',

},

});