TouchableOpacity断线造型

Question

我试图在Reactive原住民中创建导航。我已经做了一个自定义组件，它由图像和一些文本组成。在应用TouchableOpacity之前，样式设计工作得很好。但是在我把它应用到其中一个组件之后，就会发生这种情况。

​

​

所有的代码都可以在这里找到，准备运行。

我希望组件标题MojQR不会变形，而是保持与其他组件标题相同。目前，如代码所示，TouchableOpacity是仅适用于MojQR的。

Answer 1

您使用的样式有问题。当您将维度(宽度、高度)设置为百分比时，它将从包装它的组件中获取百分比。这就是为什么当您添加TouchableOpacity时，它会把所有的样式都弄乱。您有两个选项，更改正在使用的样式模式，或者做一个简单的更改，可以从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,
    },