React Native，在 FlatList 项目旁边添加图像

Question

这是使用 React Native 构建的简单代码，它运行良好，它从 JSON 链接获取数据并将其作为文本项显示在 FlatList 中。我想在这个 FlatList 中添加图像 foreach 项目。我不知道这段代码的哪一部分会显示图像。 这是 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;

Answer 1

我同意最后一个答案，但很少做造型。实际上您不能返回 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>
    );
};

Answer 2

试试这个

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

Answer 3

您必须执行以下操作

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>
    );
};