时间戳

首页 > 解决方案 > 将 touchableOpacity 添加到 Image 组件

reactjs - 将 touchableOpacity 添加到 Image 组件

问题描述

简单问题：如何将 TouchableOpacity 组件添加到图像中？这就是我这样做的方式：

<View style = { styles.categoryContainer }>
                        <TouchableOpacity
                            onPress = {() => navigation.navigate('xScreen')}
                        >
                            <Image 
                                style = {styles.categoriesImages}
                                source = {require('./img/xImage.png')}
                            />
                        </TouchableOpacity>

这些是映射到组件的样式：

categoryContainer: {
        flex: 1,
        flexDirection: 'column',
        margin: 10,
        
    },
    categoriesImages: {
       display: 'flex',
       height: 70,
       width: 70
    },

当我在博览会上运行应用程序时，图像就消失了。移除 TouchableOpacity 组件会恢复图像。

也许有人可以解释为什么这不起作用？非常感谢！

标签： reactjsreact-nativetouchableopacity

解决方案

我只是假设这是问题所在，但是如果没有样式，很难真正知道。

基本上你的Image必须有一个百分比的宽度和高度，并且你用TouchableOpacity包裹了图像，它没有“大小”。因此，您有两种方法可以解决您的问题：

  • 您使用样式的宽度和高度将 样式映射到TouchableOpacity.categoriesImages并且图像的宽度和高度都将只有 100%
  • 为图像定义一个不是百分比而是实际值的宽度和高度，TouchableOpacity将简单地适应它的内容大小

推荐阅读