映射数组和渲染图像时不显示图像
Image not showing when mapping an array and render an image
我的项目中有这组图像。
this.state.destinations = [{
"destinationId": "001",
"img": "../../assets/img/destinations/001.png"
},
{
"destinationId": "002",
"img": "../../assets/img/destinations/002.png"
},
{
"destinationId": "003",
"img": "../../assets/img/destinations/003.png"
}]
}
我试图在图像组件的视图中重复它们中的每一个,如下所示:
render() {
var {navigate} = this.props.navigation;
return (
<LinearGradient
colors={['#514A9D', '#24C6DC']} start={[0.0, 0.5]} end={[1.0, 0.5]} locations={[0.0, 1.0]} style={{flex:1}}>
<ScrollView>
{
<View style={{paddingTop: 24}}>
{
this.state.destinations.map(dest => {
return <Image style={{height: 200, width: 600}} key={dest.destinationId} source={require(dest.img)} resizeMode="contain" />
})
}
</View>
}
</ScrollView>
</LinearGradient>
);
}
但是我在尝试 运行 时在 phone 中遇到了一些疯狂的错误:
我试图 运行 expo 中的应用程序,我只是在 react-native 模式下开发它,而不是 react-native-init 模式。
尝试按以下方式重构您的代码,将您对 require 的使用直接移动到定义数据的位置,以便正确评估静态资源路径:
this.state.destinations = [{
"destinationId": "001",
"img": require("../../assets/img/destinations/001.png")
},
{
"destinationId": "002",
"img": require("../../assets/img/destinations/002.png")
},
{
"destinationId": "003",
"img": require("../../assets/img/destinations/003.png")
}]
}
然后像这样更新渲染 <Image />
的方式,删除对 require()
的调用并直接引用 dest.img
:
this.state.destinations.map(dest => {
return <Image source={dest.img}
key={dest.destinationId}
style={{height: 200, width: 600}}
resizeMode='contain' />
})
希望对您有所帮助!
动态图片导入:
"img": require("../../assets/img/destinations/001.png")
<Image source={dest.img} />
博览会link:code
我的项目中有这组图像。
this.state.destinations = [{
"destinationId": "001",
"img": "../../assets/img/destinations/001.png"
},
{
"destinationId": "002",
"img": "../../assets/img/destinations/002.png"
},
{
"destinationId": "003",
"img": "../../assets/img/destinations/003.png"
}]
}
我试图在图像组件的视图中重复它们中的每一个,如下所示:
render() {
var {navigate} = this.props.navigation;
return (
<LinearGradient
colors={['#514A9D', '#24C6DC']} start={[0.0, 0.5]} end={[1.0, 0.5]} locations={[0.0, 1.0]} style={{flex:1}}>
<ScrollView>
{
<View style={{paddingTop: 24}}>
{
this.state.destinations.map(dest => {
return <Image style={{height: 200, width: 600}} key={dest.destinationId} source={require(dest.img)} resizeMode="contain" />
})
}
</View>
}
</ScrollView>
</LinearGradient>
);
}
但是我在尝试 运行 时在 phone 中遇到了一些疯狂的错误:
我试图 运行 expo 中的应用程序,我只是在 react-native 模式下开发它,而不是 react-native-init 模式。
尝试按以下方式重构您的代码,将您对 require 的使用直接移动到定义数据的位置,以便正确评估静态资源路径:
this.state.destinations = [{
"destinationId": "001",
"img": require("../../assets/img/destinations/001.png")
},
{
"destinationId": "002",
"img": require("../../assets/img/destinations/002.png")
},
{
"destinationId": "003",
"img": require("../../assets/img/destinations/003.png")
}]
}
然后像这样更新渲染 <Image />
的方式,删除对 require()
的调用并直接引用 dest.img
:
this.state.destinations.map(dest => {
return <Image source={dest.img}
key={dest.destinationId}
style={{height: 200, width: 600}}
resizeMode='contain' />
})
希望对您有所帮助!
动态图片导入:
"img": require("../../assets/img/destinations/001.png")
<Image source={dest.img} />
博览会link:code