在图像内响应本机文本

Question

我正在制作一个图像库反应本机应用程序。我能够放置图像，但我想在每个图像的底部添加文本，但我不知道如何。这是我的代码：

state = {
images: [
require('../../assets/image1.png'),
require('../../assets/image2.png'),
require('../../assets/image3.png'),
require('../../assets/image4.png'),
require('../../assets/image5.png'),
require('../../assets/image6.png'),
require('../../assets/image7.png'),
require('../../assets/image8.png'),
],
text: [text1,text2,text3,text4,text5,text6,text7,text8]
}
let images = this.state.images.map((val, key) => {
return <TouchableWithoutFeedback key={key}>
<View style={styles.imagewrap}>
<ImageElement imgsource={val} />
<Text style={{position:'absolute'}}> {this.state.text.map((data) => {
return data
})} </Text>
</View>
</TouchableWithoutFeedback>
});

所以发生的情况是，它打印出文本"text1text2text3text4....."对于所有图像，而不是图像 1 的"text1"，图像 2 的"text2"依此类推。有人可以帮助我吗？提前谢谢你！

Answer 1

好的，映射回调中的第二个参数(你称之为"key"(是当前元素的索引(在你的代码中称为"val"(。您需要做的是在 Text 元素中，而不是映射所有文本，只需在当前索引处呈现文本即可。 所以而不是{this.state.text.map((data) => {return data})}只是做{this.state.text[key]}