狀態更新在 Android 上的 React-Native 中不起作用
P粉541551230
P粉541551230 2024-04-06 16:54:10
0
1
526

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

P粉541551230
P粉541551230

全部回覆(1)
P粉805931281

嘗試優化您的 FlatList 性能和圖像。正如我所看到的,它們是從遠端URL 獲取的,嘗試透過預載圖像來優化那裡,或者使用一些優化的圖像庫(如react-native-fast-image )來更好地載入圖像。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板