如何在本机反应中使用图像？

Question

I want to use image uri and render my Image but it doesn't show up I don't know why

here is my code hi I'm using react-native

I want to use image uri and render my Image but it doesn't show up I don't know why

here is my code

            import React from 'react';
            import styled from 'styled-components/native';
            import {FlatList,
                Dimensions,
                ScrollView,
                NativeSyntheticEvent,
                NativeScrollEvent,
            } from 'react-native';
            import {useSelector,useDispatch} from 'react-redux';

            const Container = styled.View`

            `;

            const Hey = styled.Text`

            `;

            const ImageContainer = styled.View`
            border-top-width: 1px;
            border-bottom-width: 1px;
            border-color: #D3D3D3;
            width: ${Dimensions.get('window').width}px;
            height: 400px;
            /* background: lightgray; */
            `;

            const ImageStyle = styled.Image`

            `;


            const Food = ({navigation}) => {

                const {cookUp} = useSelector((state) => state.post);


                console.log("cookUp:",cookUp);
            

                return (
                    <>
                    {cookUp.length ?  ( 
                        <FlatList
                            data={cookUp}
                            keyExtractor={(item) => String(item.id)}
                            // keyExtractor={(item, index) => {
                            //     return `${index}`;
                            // }}
                            renderItem={({item}) => (
                                console.log("item.Images:",item.Images),
                            <ImageContainer>
                                <ImageStyle
                                source={{uri:item.Images[0].src}}
                                />
                            </ImageContainer>
                        

                            )}
                        />
                    ) :
                        (<Hey>hiaaaaaa</Hey>)
                }
                </>
                );
            };

            export default Food;

and this is console log

how can I fix my code? can you please help me??

Answer 1

Try this way

import {Image} from 'react-native';

<Image
  source={{uri:item.Images[0].src}}
  width={200} 
  height={200}
/>