Reactjs TouchableOpacity破坏样式

我正在尝试在React Native中创建导航。我制作了一个自定义组件，它由一个图像和一些文本组成。在应用

TouchableOpacity

之前，样式工作正常。但当我把它应用到其中一个组件后，就会发生这种情况

---

我希望组件名称MojQR不会变形，但与其他组件一样。目前，如代码所示，

TouchableOpacity

仅应用于MojQR

您使用的样式有问题。当您将尺寸（宽度、高度）设置为百分比时，它将从包裹它的零部件中获取百分比。这就是为什么当你添加

touchablepacity

时，它会弄乱所有的样式。您有两个选项，更改您正在使用的样式模式，或者进行简单的更改，可以从

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%'
  }

//App.js
导航。导航（'Details'）}>
...
//以及样式对象中的样式
可触摸容器：{
宽度：“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,
    },

//MenuItem.js
//更改此文件的包装器：
...
//并将flexGrow属性添加到styles.menuItem
菜单项：{
宽度：“50%”，
身高：33.3333%，
填充：10，
flexGrow:1，
},