显示下载url中的图片列表

Question

如何显示图片列表?我从DB得到列表URL(本地地址)。

[
{"employeId": 1, "name": "Mariusz", "url": "../assets/servicesIcons/baleyage.png"}, 
{"employeId": 2, "name": "Mariola", "url": "../assets/servicesIcons/baleyage.png"}, 
{"employeId": 3, "name": "Rafal", "url": "../assets/servicesIcons/baleyage.png"}
] 

const HoursComponent = ({id, time}) => {
const TimewithoutLast3 = time.slice(0, -3);
return (
<View style={{...styles.rootContainer, backgroundColor: bgColor}}>
<TouchableOpacity >
<Text style={styles.buttonText} onPress={onPress}>{TimewithoutLast3}</Text>
</TouchableOpacity>
</View>
);
}


<FlatList
numColumns={3}
data={employee}
keyExtractor={item => item.id}
renderItem={({ item }) => (<EmployeeComponet {...item} />)}></FlatList>

我尝试使用require，但它不工作

Answer 1

我尝试添加这样的东西，但不工作示例url值'../../assets/servicesIcons/test.png'

<Image  source={{require:("'" + url  +  "'")}} />

，但当我添加静态值，然后是ok的

const value = require('../../assets/servicesIcons/test.png');
...
<Image  source={value} />

Answer 2

从react native中导入图像，并使用像

这样的图像标签

const HoursComponent = ({employeId, name, url}) => {
const TimewithoutLast3 = time.slice(0, -3);
return (
<View style={{...styles.rootContainer, backgroundColor: bgColor}}>
<TouchableOpacity >
<Text style={styles.buttonText} onPress={onPress}>{name}</Text>
<Image source={{uri :url}}  /> 
</TouchableOpacity>
</View>
);
}
<FlatList
numColumns={3}
data={employee}
keyExtractor={item => item.employeId}
renderItem={({ item }) => (<EmployeeComponet {...item} />)}></FlatList>