Question

如何将props与图像源一起使用以在react native中创建可用组件？我应该如何更改代码？

CategoryBox：

class CategoryBox extends Component{
    render(){
        return(
            <View style={{width: this.props.width, height: this.props.width/2 - 30,
                borderWidth: 0.5, borderColor: '#dddddd',}}>
                <View style={{ flex: 1}}>
                    <Image style={{ flex: 1, width: null, height: null}}
                           source={require(this.props.image)}
                    />
                </View>
                <View style={styles.BoxViewTextHandle}>
                    <Text style={{fontSize: 10, color: '#b63838'}}>{this.props.type}</Text>
                    <Text style={{ fontSize: 12, fontWeight: 'bold'}}>{this.props.name}</Text>
                    <Text style={{ fontSize: 10}}>{this.props.price}$</Text>
                    <StarRating
                        disabled={true}
                        maxStars={5}
                        rating={this.props.rating}
                        starSize={10}
                    />
                </View>
            </View>
        );

    }

}


export default CategoryBox;

Answer 1

要求它不是动态的。

因此，您应该从require("someString")中传递this.props.image，然后：

<Image style={{ flex: 1, width: null, height: null}}
   source={this.props.image}
/>

有关How use require?

的更多详细信息

Answer 2

我认为做到这一点的最好方法是。

<AppImage source={Icons.icon} styles={your styles}/>

然后使用任何名称创建一个Image组件，它看起来像

<div class="tab">
<button class="tablinks active" onclick="openCity(event, 'antrian')">Antrian</button>
<button class="tablinks" onclick="openCity(event, 'semua')">Data</button>

您也可以重用图像const和AppImage。

如何在图像源中使用props在react native中创建可用的组件？

2 个答案: