我有一些程式碼,其中有成對的圖像,它們都在可滑動的水平圖庫中。現在,當您單擊兩個圖像的上部時,圖像應該關閉切換,所以我所做的是,我將 isImage2Active 設為狀態,然後只需切換它們的來源即可。在 iOS 上,它運行完美且完全流暢,但在 Android 上,它幾乎根本不起作用。如果你經常點擊它,它可能會改變,但這顯然不是我想要的行為。
所以我有一個圖像元件,它就是所描述的可滑動水平圖庫
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> </> ); };
然後在裡面我有Image 組件,當我點擊Pressable 組件內的上面的圖像時,它應該觸發handleImagePress,然後更改setIsImage2Active,然後切換圖像的來源,但它在Android 上並沒有真正工作,它20次中有1 次有效,而且只有當你瘋狂地點擊它時才會有效。這是效能問題,還是 Pressable 元件的問題?我現在真的很沮喪。
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> </> ) })
我嘗試將其放入FlatList(Spotify 的FlashList,這應該會提高性能)中,因為之前我有一個PagerView 並映射了所有帖子,然後handleImagePress 會將所有圖像更改為isImage2Active ,這些圖像是圖庫的一部分,但現在我改用單獨的Image 元件,因此只需更新一個Image,但效能提高了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> </> )
我還創建了另一個螢幕,我僅使用 1 個圖像對其進行了測試,它工作得很好,但在 FlatList 內部,存在極端的效能問題。
嘗試優化您的 FlatList 性能和圖像。正如我所看到的,它們是從遠端URL 獲取的,嘗試透過預載圖像來優化那裡,或者使用一些優化的圖像庫(如
react-native-fast-image
)來更好地載入圖像。