Question

[反应本机材料菜单] 我尝试自定义菜单，但是样式属性“宽度”没有得到处理-菜单仍然狭窄。

return(
  <View style = {{
    width: 500
  }}>
  <Menu
    ref = { this.setMenuRef }
    button = {<RoundButton 
      buttonType = "menu"
      navigateTo = "menu"
      menuCall = {this.showMenu}
    style = {{
      width: 500
    }}
    />}
  >
    <MenuItem onPress = {this.hideMenu}>Reports TO DO</MenuItem>
    <MenuItem onPress = {this.hideMenu}>Settings TO DO</MenuItem>
    <MenuItem onPress = {this.hideMenu}>Help TO DO</MenuItem>
  </Menu>
</View>
);

可以自定义吗？

Answer 1

糟糕！好像您忘记指定父级 View 的高度。

将您的 Menu 组件包装在具有一定 width 和 height 的 View 中。

documentation清楚地说：

仅当组件的父级尺寸大于0时，组件才能扩展以填充可用空间。如果父级的宽度和高度或flex均不固定，则父级的尺寸为0，而flex子级的尺寸不为0。可见。

解决方案将是：

<View style = {{ width: 500, height: 500 }}>

（您可以根据需要指定尺寸）。

OR

Flex也可以使用。

<View style = {{ flex: 1 }}>

反应本机材料菜单的宽度不起作用

1 个答案: