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