react-native - 我想显示一个平面列表数据,但不显示一些数据,尤其是图像
问题描述
我用它从我的服务器收集数据
getPopularProduct = async () => {
const url = `https://swissmade.direct/wp-json/swissmade/home/popular`;
fetch(url)
.then(response => response.json())
.then((responseJson) => {
console.log(responseJson.products.thumbnail, "details")
if(responseJson.error == false){
this.setState({
dataSourcePopularProduct: responseJson.products,
//isLoading: false,
})
}
})
.catch((error) => {
console.log(error)
})
}
这是空白图像,这是平面列表和渲染项
renderPopularProduct = ({ item }) => {
const entities = new Entities();
var id = item.pid;
var img = { 'uri': item.thumbnail };
return (
<TouchableOpacity onPress={() => this.props.navigation.navigate('ProductDetails', { id })}>
<View style={styles.GalleryBox}>
<View style={styles.GalleryImg} onPress={() => this.props.navigation.navigate("ProductDetails")}>
<Image source={img} style={styles.SingelImg} largeHeap="true"/>
</View>
<View style={styles.GalleryText}>
<Text style={styles.userNmae}>{item.title}</Text>
</View>
<View style={styles.amount}>
<Text style={styles.userNmae}>{entities.decode(item.currency)} {item.price}</Text>
</View>
</View>
</TouchableOpacity>
)
}
<FlatList
data={this.state.dataSourcePopularProduct}
renderItem={this.renderPopularProduct}
keyExtractor={(item, index) => index}
horizontal={true}
showsHorizontalScrollIndicator={false}
/>
和样式表
SingelImg: {
width: '150%',
height: '120%',
//resizeMode: 'cover',
marginLeft: -25
},
这种方式我使用平面列表,但是当它显示一些数据丢失时,尤其是图像。但我的 API 会返回所有正确的数据。
解决方案
推荐阅读
- javascript - 以角度禁用另一个组件的表单字段
- javascript - Dropzone.js如何向上传的图像添加带有值的隐藏输入
- r - 使用 system() 打开带有 URL 参数的本地 index.html
- python - 如何将存储为数组的 Dataframe 值转换为列表
- python - AttributeError:模块“ocrmypdf”没有属性“ocr”
- javascript - div 内容的更改不会反映在浏览器中
- python - Tk getcoords 返回空列表
- javascript - 如何从用户选择的选项绑定到 Angular 表单
- reactjs - 如何在反应中映射嵌套数组
- javascript - 如何在数组列表中对具有相同名称的元素进行分组?