1- productDetails对象

{
    "data": {
        "product_id": 661,
        "quantity": 1,
        "category_id": 107,
        "sub_category_id": 110,
        "product_name": "Top Quality Concise Crystal Ring",
        "product_description": "Top Quality Concise Crystal Ring\r\nRing Size 5.5 Main \r\nStone Color: Clear \r\nMetal Color: Rose Gold",
        "variations": [],
        "product_price": "100.00",
        "product_discount_percent": 0,
        "product_discount_price": "100.00",
        "shop_phone_no": "9504874",
        "shop_delivery_location": "Male",
        "liked_users_count": 1,
        "total_related_products_count": 4,
        "liked_users": [
            {
                "following_user_id": 2915,
                "full_name": "Muna Adam",
                "profile_photo": "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/users/profile/1867235433581879",
                "total_liked_products": 15,
                "follow": 0
            }
        ],
        "product_images": [
            "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/products/Aiminaabee%20Shop/jdvPxcPp573DrxkBtMY9vlOuCwAWyilE4Tvg9XAJ.jpeg",
            "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/products/Aiminaabee%20Shop/CQ9vmKNi8wENHNBRZOOv3Dl3n2MutdTOIXyZ2lKs.jpeg",
            "https://aiminaabee.s3.ap-southeast-1.amazonaws.com/testing/products/Aiminaabee%20Shop/LVbWDx7my8u9kArn7zBSDHTZKt5khyfmal0ZlE18.jpeg"
        ],
        "liked_status": 0,
        "is_incart": "0"
    },
    "message": "Product detail found.",
    "status": 1 }

这是我试图获取数据的内部组件

    render(){

    const { productDetails, RelatedDetails } = this.props;

    return (

        <ScrollView>

            <View style={styles.container}>
                <View style={styles.productImage}>
                --------------------------------------------
                 <Swiper
                    showsPagination={true}
                    height={348}>
                    {productDetails.product_images.map(img => (
                        <ImageCard
                            img={img}
                        />
                    ))}
                 </Swiper>
               ----------------------------------------------

                </View>
                <LikeControls 
                    likedStatus={productDetails.liked_status}
                />
                <View style={styles.ProductInfor}>
                    <Text> MVR: {productDetails.product_price} </Text>
                    <TouchableWithoutFeedback onPress={this._prodInfoHndler}>
                        <Text style={{color:'#1DA1F2'}}> Product Information </Text>
                    </TouchableWithoutFeedback>
                </View>

                <SellerDetails 
                    shopPhone={productDetails.shop_phone_no}
                    delvLoc={productDetails.shop_delivery_location}
                />
                <View style={styles.AddToCartButton}>
                    <DefaultButton
                        bgColor ="#1B95E0"
                        margin  = {0}
                        radius  = {50}
                        padding = {10}
                        width   = {250}
                        onPress={this.emailSignInHandler}
                        >
                        Add To Cart
                    </DefaultButton>
                </View>
                <View style={styles.heading}>
                    <Text> Related Items </Text>
                </View>
                <View style={styles.relatedItems}>
                    <FlatList
                        data={func.formatData(RelatedDetails,constants.COLUMS)}
                        numColumns={constants.COLUMS}
                        //onEndReached={this._fetchResult}
                        //onEndReachedThreshold={0.7}
                        keyExtractor={(item, index) => index.toString()}
                        ListFooterComponent={() => <View style={{ height: 50, backgroundColor: '#fff' }}><ProgressBar /></View>}
                        renderItem={(info)=>(
                            <ProductGrid
                                data={info.item}
                                showProduct={this._productRelatedSelectedHandler}
                                />
                        )}
                        />
                </View>
            </View>

        </ScrollView>
    )
}

错误表明无法从模拟器读取未定义的地图属性。

1- ProductDetails是一个对象 2-Product_images是ProductDetails对象内的数组。 3-尝试遍历Product_images中的所有图像，并将其传递给名为ImageCard的组件作为道具。

这是ImageCard组件。

import React, { Component } from 'react';
import {StyleSheet, Image, View } from 'react-native';


const ImageCard = props => {

    return (
      <View style={styles.wrapper}>
          <Image
              style={{height: '100%', width: '100%'}}
              source={{uri: props.img }}
            />
      </View>
    );

}

const styles = StyleSheet.create({
  wrapper: {
    flex:1
  }
})

export default ImageCard

Answer 1

就像docs这样说：

Note that for network and data images, you will need to manually specify the dimensions of your image!

<ImageCard img={img} style={{height: 100, width: 100}} />

无论如何，作为NorianNyx，可能需要更多信息才能给出正确的答案。

Answer 2

由于某种原因，我无法通过道具工作。这就是我所做的。 1-称为动作 2-得到结果 3-进入状态数组 4-从state.array中取出它并使用map函数循环。它起作用了。

这是我的代码。

constructor(props) {
 super(props);

 this.state = {
    images: [],
    likedUsers: []
 };

 this._productRelatedSelectedHandler = 
 this._productRelatedSelectedHandler.bind(this);

}
------------------------------------
componentWillMount() {
    this._retrieveProductDetails();
}

_retrieveProductDetails() {
    this.props.actions.ProductDetail(this.props.pid)
        .then(() => {

            this._retrieveRelatedInformations ( 
                this.props.productDetails.category_id, 
                this.props.productDetails.sub_category_id 
            );

            this.setState({
                images: this.props.productDetails.product_images,
                likedUsers: this.props.productDetails.liked_users,
            });

        });
}
-------------------------------------
_getLikedUsers = () => {

    if((this.state.likedUsers).length > 0 ){
        return (
            <View style={styles.ProductLikedUsers}>   
                {this.state.likedUsers.map(img => (
                    <LikedUsers
                        img={img.profile_photo}
                        user_id={img.following_user_id}
                    />
                ))}
            </View>
        )
    }
}

Answer 3

只需避免在"初始化中使用product_images。

更改：

"product_images": [....]

至：

product_images: [....]

无法在本机中循环遍历图像数组

1- productDetails对象

3 个答案: