狀態更新在 Android 上的 React-Native 中不起作用
我有一些程式碼，其中有成對的圖像，它們都在可滑動的水平圖庫中。現在，當您單擊兩個圖像的上部時，圖像應該關閉切換，所以我所做的是，我將 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 內部，存在極端的效能問題。
