首页 > 解决方案 > 我想显示一个平面列表数据,但不显示一些数据,尤其是图像

问题描述

我用它从我的服务器收集数据

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 会返回所有正确的数据。

标签: react-nativeexporeact-native-flatlist

解决方案


推荐阅读