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

Question

我有一些代码，其中有成对的图像，它们都在可滑动的水平图库中。现在，当您单击两个图像的上部时，图像应该关闭切换，所以我所做的是，我将 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 内部，存在极端的性能问题。

Answer 1

尝试优化您的 FlatList 性能和图像。正如我所看到的，它们是从远程 URL 获取的，尝试通过预加载图像来优化那里，或者使用一些优化的图像库（如 react-native-fast-image ）来更好地加载图像。