如何创建本地json对象以循环到此视图中

Question

class ProductCategory extends Component{
    render(){
        return(
            <SafeAreaView style={{ flex: 1}}>
                <View style={{ flex: 1}}>
                        <View style={{backgroundColor: 'white'}}>
                            <Text style={styles.categoryViewHeaderTitle}>
                                Product Categories
                            </Text>
                            <View style={styles.categoryView}>
                                <CategoryBox width={width}
                                             source={{
                                                 uri: 'ect'
                                             }}
                                             name="The Cozy Room"
                                             type="PRIVATE ROOM - 2 BEDS"
                                             price={82}
                                             rating={4}
                                />
                                <CategoryBox width={width}
                                             source={{
                                                 uri: 'ect'
                                             }}
                                             name="The Cozy Room"
                                             type="PRIVATE ROOM - 2 BEDS"
                                             price={82}
                                             rating={4}
                                />
                                <CategoryBox width={width}
                                             source={{
                                                 uri: 'ect'
                                             }}
                                             name="The Cozy Room"
                                             type="PRIVATE ROOM - 2 BEDS"
                                             price={82}
                                             rating={4}
                                />

                            </View>

                        </View>

                </View>

            </SafeAreaView>
        );
    }
}

Answer 1

也许是：

class ProductCategory extends Component{
    constructor(){
        super();
        this.state={
           arr: [
              {
                 width: 200,
                 source: { uri: 'ect' },
                 name: "The Cozy Room",
                 type: "PRIVATE ROOM - 2 BEDS",
                 price: 82,
                 rating: 4,
              },
              {
                 width: 200,
                 source: { uri: 'ect' },
                 name: "The Cozy Room",
                 type: "PRIVATE ROOM - 2 BEDS",
                 price: 82,
                 rating: 4,
              },
              {
                 width: 200,
                 source: { uri: 'ect' },
                 name: "The Cozy Room",
                 type: "PRIVATE ROOM - 2 BEDS",
                 price: 82,
                 rating: 4,
              },
           ]
        }
    }
    render(){
        return(
            <SafeAreaView style={{ flex: 1}}>
                <View style={{ flex: 1}}>
                        <View style={{backgroundColor: 'white'}}>
                            <Text style={styles.categoryViewHeaderTitle}>
                                Product Categories
                            </Text>
                            <View style={styles.categoryView}>
                              { this.state.arr.map(m =>
                                <CategoryBox ...m
                                />
                              }
                            </View>

                        </View>

                </View>

            </SafeAreaView>
        );
    }
}

OR

                              { this.state.arr.map(m =>
                                <CategoryBox width={m.width}
                                         source={m.source}
                                         name={m.name}
                                         type={m.type}
                                         price={m.price}
                                         rating={m.rating}
                                />
                              }