Kemas kini status tidak berfungsi dalam React-Native pada Android
P粉541551230
P粉541551230 2024-04-06 16:54:10
0
1
483

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.

P粉541551230
P粉541551230

membalas semua(1)
P粉805931281

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.

Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan
Tentang kita Penafian Sitemap
Laman web PHP Cina:Latihan PHP dalam talian kebajikan awam,Bantu pelajar PHP berkembang dengan cepat!