react-native - react-native-material-menu 的宽度不起作用

Question

[react-native-material-menu] 我尝试自定义菜单，但未处理样式属性“宽度” - 菜单仍然很窄。

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>
);

可以定制吗？

标签： react-native

Answer 1

哎呀！看起来您忘记指定父View的高度。

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

文档清楚地说：

如果父组件的尺寸大于 0，则组件只能扩展以填充可用空间。如果父组件没有固定的宽度和高度或 flex，则父组件的尺寸将为 0，并且 flex 子组件将不可见。

解决方案是：

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

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

或者

也可以使用Flex 。

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