我想显示平面列表数据,但不显示某些数据,尤其是图像

时间:2020-08-13 07:52:10

标签: react-native expo react-native-flatlist

我用它来从服务器中收集数据

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

this the blank space imag,这是平面列表和渲染项目

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

0 个答案:

没有答案