我有一些代码，其中有成对的图像，它们都在可滑动的水平图库中。现在，当您单击两个图像的上部时，图像应该关闭切换，所以我所做的是，我将 isImage2Active 设置为状态，然后只需切换它们的源即可。在 iOS 上，它运行完美且完全流畅，但在 Android 上，它几乎根本不起作用。如果你经常点击它，它可能会改变，但这显然不是我想要的行为。
所以我有一个图像组件，它就是所描述的可滑动水平图库
1
1134const 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 内部，存在极端的性能问题。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
尝试优化您的 FlatList 性能和图像。正如我所看到的，它们是从远程 URL 获取的，尝试通过预加载图像来优化那里，或者使用一些优化的图像库（如
react-native-fast-image）来更好地加载图像。