Kemas kini status tidak berfungsi dalam React-Native pada Android

Question

Saya mempunyai beberapa kod yang mempunyai sepasang imej dalam galeri mendatar boleh leret. Sekarang apabila anda mengklik pada bahagian atas kedua-dua imej imej harus togol off, jadi apa yang saya lakukan ialah, saya menetapkan isImage2Active kepada keadaan dan kemudian hanya menogol sumbernya. Pada iOS ia berfungsi dengan sempurna dan lancar sepenuhnya, tetapi pada Android ia hampir tidak berfungsi sama sekali. Ia mungkin berubah jika anda sering mengklik padanya, tetapi itu jelas bukan tingkah laku yang saya mahukan.

Jadi saya mempunyai komponen imej iaitu galeri mendatar boleh slaid seperti yang diterangkan

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

Kemudian di dalam saya mempunyai komponen Imej dan apabila saya mengklik pada imej di atas di dalam komponen Boleh Ditekan, ia harus mencetuskan handleImagePress dan kemudian menukar setIsImage2Active dan kemudian menukar sumber imej tetapi ia tidak benar-benar berfungsi pada Android dan ia berfungsi 20 kali Ia berfungsi 1 kali, dan hanya jika anda mengklik padanya seperti gila. Adakah ini isu prestasi, atau isu dengan komponen Boleh Ditekan? Saya benar-benar kecewa sekarang.

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

    )
})

Saya cuba memasukkannya ke dalam FlatList (Spotify's FlashList, ini sepatutnya meningkatkan prestasi) kerana sebelum ini saya mempunyai PagerView dan memetakan semua siaran, kemudian handleImagePress akan menukar semua imej kepada isImage2Active yang merupakan sebahagian daripada galeri, Tetapi sekarang saya menggunakan komponen Imej yang berasingan, jadi hanya satu Imej perlu dikemas kini, tetapi prestasinya telah meningkat sebanyak 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>
    </>
)

Saya juga mencipta skrin lain dan saya mengujinya menggunakan hanya 1 imej dan ia berfungsi dengan baik, tetapi di dalam FlatList, saya mempunyai masalah prestasi yang melampau.

Answer 1

Cuba untuk mengoptimumkan prestasi dan imej FlatList anda. Seperti yang saya dapat lihat ia sedang diambil daripada URL jauh, cuba untuk mengoptimumkan di sana dengan pramuat imej, atau gunakan beberapa pustaka imej yang dioptimumkan (seperti react-native-fast-image ) untuk memuatkan imej dengan lebih baik.