La mise à jour du statut ne fonctionne pas dans React-Native sur Android

Question

J'ai du code qui contient des paires d'images dans une galerie horizontale pouvant être glissée. Maintenant, lorsque vous cliquez sur la partie supérieure des deux images, les images doivent être désactivées. Ce que j'ai donc fait, j'ai défini isImage2Active sur l'état, puis j'ai simplement basculé leur source. Sur iOS, cela fonctionne parfaitement et de manière totalement fluide, mais sur Android, cela ne fonctionne presque pas du tout. Cela peut changer si vous cliquez souvent dessus, mais ce n'est évidemment pas le comportement que je souhaite.

J'ai donc un composant image qui est la galerie horizontale coulissante comme décrit

const Images = () => {

            const [currentPage, setCurrentPage] = useState(0);
            const swiperRef = useRef(null);

            return (
                <>

                    <FlashList
                        data={item.posts}
                        horizontal={true}
                        pagingEnabled={true}
                        keyExtractor={(item) => item.id}
                        estimatedItemSize={350}
                        renderItem={({ item }) => {
                            return (
                                <>
                                    <GalleryImage item={item} />
                                </>
                            );
                        }}
                    />
                    {currentPage !== 2 && (
                        <>
                            <Pressable
                                style={{
                                    flex: 1,
                                    backgroundColor: "white",
                                    flexDirection: "row",
                                    zIndex: 1,
                                }}
                                onPress={() => {
                                    setCurrentPage(currentPage + 2);
                                }}
                            >
                                <Image
                                    style={{
                                        position: "absolute",
                                        bottom: 20,
                                        right: 20,
                                        width: 60,
                                        height: 80,
                                        zIndex: 1,
                                        borderRadius: 15,
                                        borderWidth: 1.5,
                                        borderColor: "black",
                                    }}
                                    source={item.photoUrl2}
                                    blurRadius={100}
                                />
                            </Pressable>
                        </>
                    )}
                    <Pressable
                        style={{
                            flex: 1,
                            backgroundColor: "white",
                            flexDirection: "row",
                            zIndex: 1,
                        }}
                        onPress={switchToMatch}
                    >
                        <Image
                            style={{
                                position: "absolute",
                                bottom: 20,
                                left: 20,
                                width: 50,
                                height: 50,
                                zIndex: 1,
                                borderRadius: 50,
                            }}
                            source={
                                showMatchPost
                                    ? "https://i.pinimg.com/474x/2c/86/be/2c86be60d12339b29609532bcbdf6895.jpg"
                                    : "https://i.pinimg.com/474x/63/3e/c1/633ec1cf306c5ec2bc4e37d1ff6afa83.jpg"
                            }
                        />
                    </Pressable>
                </>
            );
        };

Ensuite, à l'intérieur, j'ai le composant Image et lorsque je clique sur l'image ci-dessus à l'intérieur du composant Pressable, cela devrait déclencher handleImagePress, puis modifier setIsImage2Active, puis changer la source de l'image, mais cela ne fonctionne pas vraiment sur Android et cela fonctionne 20 fois Cela fonctionne 1 fois, et seulement si vous cliquez dessus comme un fou. S'agit-il d'un problème de performances ou d'un problème avec le composant Pressable ? Je suis vraiment frustré en ce moment.

const GalleryImage = React.memo(({ item }) => {

    const [isImage2Active, setIsImage2Active] = useState(false);
    const [showMatchPost, setShowMatchPost] = useState(false);

    const handleImagePress = useCallback(() => {
        setIsImage2Active(!isImage2Active);
    }, [isImage2Active]);

    const switchToMatch = useCallback(() => {
        setShowMatchPost(!showMatchPost);
    }, [showMatchPost]);


    return (
        <>
            <View
                style={{
                    justifyContent: "center",
                    alignItems: "center",
                    flex: 1,
                    width: 390, // or use a fixed value if you prefer
                }}
            >
                <Pressable
                    style={{
                        position: "absolute",
                        top: 20,
                        right: 20,
                        backgroundColor: "white",
                        flexDirection: "row",
                        zIndex: 1000,
                    }}
                    onPress={handleImagePress}
                >
                    <Image
                        style={{
                            position: "absolute",
                            top: 0,
                            right: 0,
                            width: 100,
                            height: 150,
                            zIndex: 1,
                            borderRadius: 15,
                        }}
                        source={
                            isImage2Active
                                ? showMatchPost
                                    ? item.photoUrl2
                                    : item.photoUrl1
                                : showMatchPost
                                    ? item.photoUrl1
                                    : item.photoUrl2
                        }
                    />
                </Pressable>
                <Image
                    style={{ width: "100%", height: 390 }}
                    source={
                        isImage2Active
                            ? showMatchPost
                                ? item.photoUrl1
                                : item.photoUrl2
                            : showMatchPost
                                ? item.photoUrl2
                                : item.photoUrl1
                    }
                    blurRadius={0}
                />
            </View>
        </>

    )
})

J'ai essayé de le mettre dans une FlatList (FlashList de Spotify, cela devrait améliorer les performances) car avant d'avoir un PagerView et de mapper tous les messages, handleImagePress changerait toutes les images en isImage2Active qui font partie de la galerie, mais maintenant je suis en utilisant un composant Image distinct à la place, donc une seule image doit être mise à jour, mais les performances se sont améliorées de 0.

const [isImage2Active, setIsImage2Active] = useState(false);
const [showMatchPost, setShowMatchPost] = useState(false);

const handleImagePress = useCallback(() => {
    setIsImage2Active(!isImage2Active);
}, [isImage2Active]);

return (
    <>
        <View style={{ flex: 1, width: 100, height: 100, }}>
            <Pressable style={{
                flex: 1, width: 100, height: 100, borderRadius: 20
            }} onPress={handleImagePress}>
                <Image style={{
                    flex: 1, width: 100, height: 100, borderRadius: 20
                }}
                    source={isImage2Active ? "https://i.pinimg.com/474x/f3/7c/ff/f37cfff4e11964b9ae846f901965cc5e.jpg" : "https://i.pinimg.com/474x/fa/84/56/fa84564e78db58b48e10a245bb7fdb56.jpg"} />
            </Pressable>
        </View>
    </>
)

J'ai également créé un autre écran et je l'ai testé en utilisant une seule image et cela a bien fonctionné, mais à l'intérieur de la FlatList, j'ai des problèmes de performances extrêmes.

Answer 1

Essayez d'optimiser les performances et les images de votre FlatList. Comme je vois qu'elles sont récupérées à partir d'une URL distante, essayez de les optimiser en préchargeant les images, ou utilisez une bibliothèque d'images optimisée (comme react-native-fast-image) pour mieux charger les images.