reactjs - 反应原生 - 不变违规：不支持动态更改 onViewableItemsChanged

Question

我试图在本机反应中构建图像轮播并遇到以下错误：

不变违规：不支持动态更改 onViewableItemsChanged

此错误仅在备用重新加载时出现。

我尝试使用 useRef 挂钩而不是 useCallback 并解决了问题，但我不明白为什么 useCallback 无法解决此问题

代码 ：

import React, { useState, useCallback } from 'react'
import { View, FlatList, Image, useWindowDimensions } from 'react-native'
import styles from './styles'


interface imagesProperties {
    images: string[];
}

const ImageCarousal = ({ images } : imagesProperties) => {

    const [activeIndex, setActiveIndex] = useState(0);

    const windowWidth = useWindowDimensions().width;

    const onCarousalChange = useCallback( (viewableItems) => {
        if(viewableItems.changed.length>0)
            setActiveIndex(viewableItems.changed[0].index);
        
    }, [])

    return (
        <View style={styles.root}>
            <FlatList 
                data={images} 
                renderItem={ ({ item }) => <Image style={[styles.image, { width: windowWidth-40 }]} source={{ uri : item }} /> } 
                horizontal
                showsHorizontalScrollIndicator={false}
                snapToInterval={ windowWidth-20 }
                snapToAlignment={'center'}
                decelerationRate={'fast'}
                viewabilityConfig={{ viewAreaCoveragePercentThreshold: 50 }}
                onViewableItemsChanged={onCarousalChange}
                />
            <View style={styles.dotContainer}>
                { images.map( (image, index) => <View key={index} style={[styles.dot, { backgroundColor: (activeIndex == index) ? '#d1d1d1':'#fff' }]}></View> ) }
            </View>
        </View>
    )
}

export default ImageCarousal

标签： reactjsreact-nativereact-native-flatlist