TouchableOpacity破坏样式

Question

我正在尝试在React Native中创建导航。我已经制作了一个自定义组件，其中包含一个图像和一些文本。在应用TouchableOpacity之前，样式可以正常工作。但是将其应用于其中一个组件后，就会发生这种情况。

All of the code can be found here, ready to run.

我希望组件标题MojQR不会变形，但会像其余部分一样保持不变。当前，如代码所示，TouchableOpacity被only应用于MojQR

Answer 1

您对所使用的样式有疑问。当您将尺寸（宽度，高度）设置为百分比时，它将从包装它的组件中获取百分比。这就是为什么当您添加TouchableOpacity时会弄乱所有样式的原因。您有2个选项，可以更改正在使用的样式或进行简单的更改，从而可以从width动态更改MenuItem，如下所示：

//App.js

<TouchableOpacity style={styles.touchableContainer} onPress={() => navigation.navigate('Details')}>
  <MenuItem itemImage={require('./app/img/QR_code_for_mobile_English_Wikipedia.svg.png')} children='Moj QR' isWrapped={true} />
</TouchableOpacity>
...

//And the styling inside your style object
  touchableContainer: {
    width: '50%'
  }

在上面的代码中，您添加了将用于更改]中样式的道具。

//MenuItem.js
//change the wrapper for this one:
<View style={this.props.isWrapped ? {...styles.menuItem, width: '100%'} : styles.menuItem}>
...

//And add the flexGrow property to your styles.menuItem
    menuItem: {
        width: '50%',
        height: '33.3333%',
        padding: 10,
        flexGrow: 1,
    },