javascript - 如何使用包react-native-image-viewing显示图像的当前索引

Question

所以我使用这个包https://github.com/jobtoday/react-native-image-viewing以图库的形式显示图像，一切都工作得很好，但是当我滑动下一张图像时，它并没有改变底部的索引，它只是保持索引相同，尽管我已经使用了这个 prop 函数 onImageIndexChange 但下面仍然没有用，我的代码有人可以吗帮助:

import ImageView from "react-native-image-viewing";


const Example = () => {
    const ImagesExamples = [
        {
            uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
            page: 0
        },
        {
            uri: 'https://images.ctfassets.net/hrltx12pl8hq/61DiwECVps74bWazF88Cy9/2cc9411d050b8ca50530cf97b3e51c96/Image_Cover.jpg?fit=fill&w=480&h=270',
            page: 1
        },
        {
            uri: 'https://cdn.pixabay.com/photo/2021/08/25/20/42/field-6574455__340.jpg',
            page: 2
        },
        {
            uri: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTx5kWBc-yusySv8AFM14-CMJw07rXAhRsOnHIf5xklL2pg9f-CYF40IsxKIZP-_2bOq7o&usqp=CAU',
            page: 3
        },
        {
            uri: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
            page: 4
        },
    ];

    const [currentImageIndex, setImageIndex] = useState(0);
    const [isVisible, setIsVisible] = useState(false);

    const handleSetIsVisible = (index) => {
        setImageIndex(index)
        setIsVisible(true)
    }

    return (
        <View style={styles.container}>
            {ImagesExamples.map((uri, index) => {
                return (
                    <View >
                        <Text>
                            {uri.page}
                        </Text>
                        <TouchableOpacity onPress={() => handleSetIsVisible(uri.page)}>
                            <Image source={{ uri: uri.uri }} style={{ width: 100, height: 100 }} />
                        </TouchableOpacity>

                    </View>
                );
            })}

            <ImageView
                images={ImagesExamples}
                imageIndex={currentImageIndex}
                presentationStyle="overFullScreen"
                visible={isVisible}
                onRequestClose={() => setIsVisible(false)}
                onImageIndexChange={() => setImageIndex(currentImageIndex)}
                FooterComponent={() => (
                    <View style={styles.root}>
                        <Text style={styles.text}>{`${currentImageIndex + 1}/${ImagesExamples.length}`}</Text>
                    </View>
                )}
            />
        </View>
    );
};

export default Example;

Answer 1

请尝试一下

const handleSetIsVisible = () => {
        setIsVisible(true)
    }

            <ImageView
                images={ImagesExamples}
                imageIndex={currentImageIndex}
                presentationStyle="overFullScreen"
                visible={isVisible}
                onRequestClose={() => setIsVisible(false)}
                onImageIndexChange={(index) => setImageIndex(index)} 
                FooterComponent={() => (
                    <View style={styles.root}>
                        <Text style={styles.text}>{`${currentImageIndex + 1}/${ImagesExamples.length}`}</Text>
                    </View>
                )}
            />