状态更新在Android上的React-Native中不起作用

Question

我有一些代码，其中我有一对图像，它们都在一个可滑动的水平画廊。当你点击两个图像的上方时，图像会关闭，我将isImage2Active设为状态，然后切换两个图像的源。在iOS平台上，它可以完美流畅地运行，但在Android平台上却几乎无法运行。如果你经常点击它，它可能会改变，但这显然不是我想要的行为。

我有一个Images组件，它是描述的可滑动水平Gallery

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 (FlashList由Spotify，这应该提高性能)，因为以前我有一个PagerView和映射所有的帖子，然后handleImagePress会改变所有的图像到isImage2Active是画廊的一部分，但现在我切换到单独的图像组件，所以只有一个图像应该更新，但性能提高了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>
</>
)

我还创建了另一个屏幕，在那里我只测试了一个图像，它工作得很好，但在FlatList内部，有极端的性能问题。

Answer 1

尝试优化你的FlatList性能和你的图像。正如我所看到的，它们是从远程URL获取的，尝试通过预加载图像或使用一些优化的图像库(如react-native-fast-image)来优化图像。