Javascript 反应本机，在FlatList项旁边添加图像

这是使用React Native构建的简单代码，工作正常，它从JSON链接获取数据，并在FlatList中显示为文本项。我想在此平面列表中添加每个项目的图像。我不知道在这段代码的哪个部分会显示图像。 这是JSON文件：

[
  {"uid":"001","uname":"Jon","uimage":"http:\/\/me.com\/jon.jpg"},
  {"uid":"002","uname":"Eds","uimage":"http:\/\/me.com\/eds.jpg"},
  {"uid":"003","uname":"Sam","uimage":"http:\/\/me.com\/sam.jpg"}
]

这是RN代码：

import React, { useState, useEffect } from 'react';
// import all the components we are going to use
import {
SafeAreaView,
Text,
StyleSheet,
View,
FlatList,
Image
} from 'react-native';
const App = () => {
const [masterDataSource, setMasterDataSource] = useState([]);

useEffect(() => {
    fetch('http://www.link2json.com/data.json')
        .then((response) => response.json())
        .then((responseJson) => {
            setMasterDataSource(responseJson);
        })
        .catch((error) => {
            console.error(error);
        });
}, []);

const ItemView = ({ item }) => {
    return (
        // Flat List Item
        <Text
            style={styles.itemStyle}
            onPress={() => getItem(item)}>
            {item.unam}
        </Text>           
        <Image source={ uri: {'uimage'}} /> //<--Here's the issue
    );
};

const ItemSeparatorView = () => {
    return (
        // Flat List Item Separator
        <View
            style={{
                height: 0.5,
                width: '100%',
                backgroundColor: '#C8C8C8',
            }}
        />
    );
};

const getItem = (item) => {
    // Function for click on an item
    alert('Id : ' + item.uid + ' Title : ' + item.unam);

};

return (
    <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
            <FlatList
                data={masterDataSource}
                keyExtractor={(item, index) => index.toString()}
                ItemSeparatorComponent={ItemSeparatorView}
                renderItem={ItemView}
            />
        </View>
    </SafeAreaView>
);
};

const styles = StyleSheet.create({
container: {
    backgroundColor: 'white',
},
itemStyle: {
    padding: 10,
},
});

export default App;

import React，{useState，useffect}来自“React”；
//导入我们将要使用的所有组件
进口{
安全区域视图，
文本，
样式表，
看法
平面列表，
形象
}从“反应本机”；
常量应用=（）=>{
const[masterDataSource，setMasterDataSource]=useState（[]）；
useffect（（）=>{
取（'http://www.link2json.com/data.json')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
setMasterDataSource（responseJson）；
})
.catch（（错误）=>{
控制台错误（error）；
});
}, []);
const ItemView=（{item}）=>{
返回(
//简单列表项
getItem（项目）}>
{item.una}
// 你必须做下面的事情

const ItemView = ({ item }) => {
    return (
        // Flat List Item
       <View style={{flexDirection:'row'}}>
        <Text
            style={styles.itemStyle}
            onPress={() => getItem(item)}>
            {item.unam}
        </Text>           
        <Image style={{height:50,width:50}} source={{uri: item.uimage}} />
       </View>
    );
};

const ItemView=（{item}）=>{
返回(
//简单列表项
getItem（项目）}>
{item.una}
);
};
您必须执行以下操作

const ItemView = ({ item }) => {
    return (
        // Flat List Item
       <View style={{flexDirection:'row'}}>
        <Text
            style={styles.itemStyle}
            onPress={() => getItem(item)}>
            {item.unam}
        </Text>           
        <Image style={{height:50,width:50}} source={{uri: item.uimage}} />
       </View>
    );
};

const ItemView=（{item}）=>{
返回(
//简单列表项
getItem（项目）}>
{item.una}
);
};
试试这个

<Image style={{height:50,width:50}} source={{uri: item.uimage}} /> // add here

//在此处添加
试试这个

<Image style={{height:50,width:50}} source={{uri: item.uimage}} /> // add here

//在此处添加
我同意上一个答案，但做了一些样式设置。实际上，您不能返回2个视图项，因此您需要添加一个父视图以使用其中的其他项，这样您只返回单个视图项

const ItemView = ({ item }) => {
    return (
       <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
        <Text
            style={styles.itemStyle}
            onPress={() => getItem(item)}>
            {item.unam}
        </Text>           
        <Image style={{height:50,width:50}} source={{uri: item.uimage}} />
       </View>
    );
};

const ItemView=（{item}）=>{
返回(
getItem（项目）}>
{item.una}
);
};
我同意上一个答案，但做了一些样式设置。实际上，您不能返回2个视图项，因此您需要添加一个父视图以使用其中的其他项，这样您只返回单个视图项

const ItemView = ({ item }) => {
    return (
       <View style={{flexDirection:'row', justifyContent: 'space-between'}}>
        <Text
            style={styles.itemStyle}
            onPress={() => getItem(item)}>
            {item.unam}
        </Text>           
        <Image style={{height:50,width:50}} source={{uri: item.uimage}} />
       </View>
    );
};

const ItemView=（{item}）=>{
返回(
getItem（项目）}>
{item.una}
);
};
您建议的代码不会抛出错误，但它不会显示平面列表项旁边的图像。@HowardJohn您可以在浏览器中访问uimage url并查看图像吗？是的，即使我使用此图像链接也可以确保：我已测试过，效果良好，您添加了右上方的样式？@HowardJohn检查此零食您建议的代码没有抛出错误，但它不会显示平面列表项旁边的图像。@HowardJohn您可以在浏览器中访问uimage url并查看图像吗？是的，即使我使用了此图像链接也可以确保：我已测试且效果良好，您添加了上面的样式，对吗？@HowardJohn检查此零食没有更多错误，但项目旁边没有图像。您可以添加原型图像到您的问题您想如何显示您的图像？没有更多错误，但在项目旁边没有图像。您能将原型图像添加到您的问题您想如何显示您的图像吗？