如何在本机反应中设置固定菜单大小？答案

【问题标题】：How can set menu size fixed in react native?如何在本机反应中设置固定菜单大小？
【发布时间】：2019-05-02 12:22:23
【问题描述】：

单击图标时我正在设置选项菜单，但它显示的菜单大小不同而不是相同。我将此菜单设置为平面列表项，并使用 react-native-popup-menu 库以及任何其他显示菜单的方式。我想使用每个菜单选项的高度和宽度固定。这是我的代码：-

_renderItem = ({item}) => {      
return(      
  <TouchableOpacity onPress={() => this.handleListItemPress(item)}>
    <View >
      <View >
        <View style={{flexDirection:'row',marginBottom:2}}>
          <ImageView 
            image={item.pictures[0]}
            style={[{marginRight:2},styles.imageStyle]}
          />
          <ImageView 
            image={item.pictures[1]}
            style={[{marginLeft:2},styles.imageStyle]} 
          />
        </View>
        <View style={{flexDirection:'row',marginTop:2}}>
          <ImageView 
            style={[{marginRight:2},styles.imageStyle]}
            image={item.pictures[2]}
          />
          <ImageView 
            image={item.pictures[3]}
            style={[{marginLeft:2},styles.imageStyle]}
          />
        </View>
      </View>
      <View>
        <TextViewNonClickable 
          textViewText={item.name}

        />
        <TextViewNonClickable 
          textViewText={item.description}              
        />
      </View>            

      <MenuProvider>
            <Menu style={{position:'absolute',top:8,right:8}}>
                <MenuTrigger >
                  <Icon
                    name = 'more-vertical'
                    type = 'feather'
                    color = {color.colorWhite}
                    iconStyle={{padding:12}}
                    size={24}                                            
                  />
                </MenuTrigger>
                <MenuOptions >
                <MenuOption >
                    <Text >edit</Text>
                </MenuOption>
                <MenuOption>
                    <Text >delete</Text>
                </MenuOption>
                </MenuOptions>
            </Menu>
        </MenuProvider>                               
    </View>
  </TouchableOpacity>
)
}

【问题讨论】：

标签： javascript node.js react-native ecmascript-6

【解决方案1】：

请将 customStyles 作为道具传递给 MenuOptions 和 MenuOption。

<MenuOptions optionsContainerStyle={{width:100,height:60}}>
<MenuOption customStyles={{width:100,height:30}}/>
</MenuOptions>

【讨论】：

它有效，但在 menuOptions optionsContainerStyle 中使用而不是自定义样式。之后我有一个问题，我没有显示在文本中..

【解决方案2】：

我已经完成了，但是我无法在文本上方显示菜单

这是我的新代码：-

      <MenuProvider>
            <Menu style={{position:'absolute',top:0,right:0}}>
                <MenuTrigger >
                  <Icon
                    name = 'more-vertical'
                    type = 'feather'
                    color = {color.colorWhite}
                    iconStyle={{padding:12}}
                    size={24}                                            
                  />
                </MenuTrigger>
                <MenuOptions optionsContainerStyle=
   {{paddingLeft:8,height:96,width:100}}>
                <MenuOption customStyles={{height:48,width:100}}>
                    <Text 
                      style={{fontWeight:'bold',paddingTop:8}}
                      onPress={() => 
   this.openAddOrUpdateModal('update',item)}
                    >edit</Text>
                </MenuOption>
                <MenuOption customStyles={{height:48,width:100}}>
                    <Text style=
   {{fontWeight:'bold',paddingTop:8}}>delete</Text>
                </MenuOption>
                </MenuOptions>
            </Menu>
        </MenuProvider>

【讨论】：