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

【问题标题】：how can I use Image in react native?如何在本机反应中使用图像？
【发布时间】：2021-05-24 12:36:55
【问题描述】：

我想使用图像 uri 并渲染我的图像，但它不显示我不知道为什么

这是我的代码嗨，我正在使用 react-native

我想使用图像 uri 并渲染我的图像，但它不显示我不知道为什么

这是我的代码

            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;

这是控制台日志

如何修复我的代码？你能帮帮我吗？？

【问题讨论】：

标签： javascript node.js reactjs react-native styled-components

【解决方案1】：

试试这个方法

import {Image} from 'react-native';

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

【讨论】：