时间戳

首页 > 解决方案 > 反应图像内的本机文本

react-native - 反应图像内的本机文本

问题描述

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

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”等等。有人能帮我吗？先感谢您！

标签： react-native

解决方案

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

推荐阅读