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

好的，映射回调中的第二个参数（您称为“键”）是当前元素的索引（在代码中称为“ val”）。您需要做的是在Text元素中，而不是通过所有文本进行映射，而只需在当前索引处呈现文本即可。因此，而不是{this.state.text.map((data) => {return data})} 做就是了 {this.state.text[key]}

在图像内部反应本机文本

1 个答案: