Die Statusaktualisierung funktioniert in React-Native auf Android nicht

Question

Ich habe einen Code, der Bildpaare in einer wischbaren horizontalen Galerie enthält. Wenn Sie nun auf den oberen Teil beider Bilder klicken, sollten die Bilder ausgeschaltet werden. Ich habe also isImage2Active auf den Status gesetzt und dann einfach ihre Quelle umgeschaltet. Unter iOS funktioniert es perfekt und völlig flüssig, aber unter Android funktioniert es fast gar nicht. Es kann sich ändern, wenn Sie häufig darauf klicken, aber das ist offensichtlich nicht das Verhalten, das ich möchte.

Ich habe also eine Bildkomponente, die wie beschrieben die verschiebbare horizontale Galerie ist

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>
                </>
            );
        };

Dann habe ich darin die Image-Komponente und wenn ich auf das obige Bild in der Pressable-Komponente klicke, sollte handleImagePress ausgelöst und dann setIsImage2Active geändert und dann die Quelle des Bildes gewechselt werden, aber unter Android funktioniert es nicht wirklich und es funktioniert 20 Mal Es funktioniert einmal und nur, wenn man wie verrückt darauf klickt. Handelt es sich hierbei um ein Leistungsproblem oder um ein Problem mit der Pressable-Komponente? Ich bin gerade wirklich frustriert.

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>
        </>

    )
})

Ich habe versucht, es in eine FlatList (Spotifys FlashList, das sollte die Leistung verbessern) einzufügen, denn bevor ich eine PagerView hatte und alle Beiträge zugeordnet hatte, änderte handleImagePress alle Bilder in isImage2Active, die Teil der Galerie sind, aber jetzt bin ich es Verwenden Sie stattdessen eine separate Image-Komponente, sodass nur ein Image aktualisiert werden muss, aber die Leistung hat sich um 0 verbessert.

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>
    </>
)

Ich habe auch einen anderen Bildschirm erstellt und ihn mit nur einem Bild getestet und es hat gut funktioniert, aber innerhalb der FlatList habe ich extreme Leistungsprobleme.

Answer 1

尝试优化您的 FlatList 性能和图像。正如我所看到的，它们是从远程 URL 获取的，尝试通过预加载图像来优化那里，或者使用一些优化的图像库（如 react-native-fast-image ）来更好地加载图像。