FlatList React Native - 完整圖像未顯示在每個元素中

Question

我正在嘗試在我的 expo React Native 應用程序中使用 FlatList。 我能夠讓 FlatList 正常工作，但沒有為每個項目顯示完整圖像（看起來好像只顯示圖像的左上角）。 每張圖片的尺寸為 717x717。 請問有人可以建議嗎？ 也許我有樣式問題？ 我希望圖像的寬度和高度不是固定的，而是大小動態的，這是我在下面嘗試實現但沒有成功的。 我已經包含了下面圖片的鏈接。

const Inspiration = () => {

    const handleSelectedImage = (e) => {
        console.log('image selected', e);
    };
    return (
        <>
            <CreatedImageModal />
            <ModalGeneratingImage />
            <ExamplePrompt />
            <FlatList
                contentContainerStyle={{ flexGrow: 1 }}
                data={EXAMPLES}
                style={styles.list}
                numColumns={2}
                keyExtractor={(item) => item.id}
                ListHeaderComponent={<Prompt />}

                renderItem={({ item }) => (
                    <Image
                        resizeMode={'contain'}
                        onPress={() => handleSelectedImage(item)}
                        transition={true}
                        source={item.path}
                        containerStyle={styles.item}
                        PlaceholderContent={<ActivityIndicator />}
                    />
                )}
            />
        </>
    );
};

const styles = StyleSheet.create({
    list: {
        width: '100%',
        backgroundColor: '#000',

    },
    item: {
        aspectRatio: 1,
        width: '100%',
        flex: 1,
    },
});


const EXAMPLES = [
    {
        id: '1',
        path: require('../assets/img-1_small.png'),
        prompt: 'A synthwave style sunset above the reflecting water of the sea, digital art'
    },
    {
        id: '2',
        path: require('../assets/img-2_small.png'),
        prompt: 'A van Gogh style painting of an American football player'
    },
    {
        id: '3',
        path: require('../assets/img-3_small.png'),
        prompt: '3D render of a cute tropical fish in an aquarium on a dark blue background, digital art'
    },
    {
        id: '4',
        path: require('../assets/img-4_small.png'),
        prompt: 'A cartoon of a cat catching a mouse'
    },
    {
        id: '5',
        path: require('../assets/img-5_small.png'),
        prompt: 'A comic book cover of a superhero wearing headphones'
    },
    {
        id: '6',
        path: require('../assets/img-6_small.png'),
        prompt: 'A hand-drawn sailboat circled by birds on the sea at sunrise'
    },
    {
        id: '7',
        path: require('../assets/img-7_small.png'),
        prompt: 'An expressive oil painting of a basketball player dunking, depicted as an explosion of a nebula'
    },
    {
        id: '8',
        path: require('../assets/img-8_small.png'),
        prompt: 'A hand drawn sketch of a Porsche 911'
    },
];

export default Inspiration;

這是我要顯示示例的圖像的鏈接

Answer 1

您可以在 Image 組件中添加 resizeMode。

<Image
   source={item.path}
   resizeMode={'contain'}
   // Other Props remain same
 />

希望這能解決您的問題。

Answer 2

解決了你的問題檢查這個 Expo 零食鏈接Expo 鏈接

Answer 3

您可以使用stretch屬性

const Inspiration = () => {

    const handleSelectedImage = (e) => {
        console.log('image selected', e);
    };
    return (
        <>
            <CreatedImageModal />
            <ModalGeneratingImage />
            <ExamplePrompt />
            <FlatList
                contentContainerStyle={{ flexGrow: 1 }}
                data={EXAMPLES}
                style={styles.list}
                numColumns={2}
                keyExtractor={(item) => item.id}
                ListHeaderComponent={<Prompt />}

                renderItem={({ item }) => (
                    <Image
                        resizeMode={'stretch'}
                        onPress={() => handleSelectedImage(item)}
                        transition={true}
                        source={item.path}
                        containerStyle={styles.item}
                        PlaceholderContent={<ActivityIndicator />}
                    />
                )}
            />
        </>
    );
};

const styles = StyleSheet.create({
    list: {
        width: '100%',
        backgroundColor: '#000',

    },
    item: {
        aspectRatio: 1,
        width: '100%',
        flex: 1,
        height: 400

    },
});

您將高度和寬度首選項添加到您的圖像

你可以試試我的方法。 希望對你有幫助