Question

我在单击图标时正在设置选项菜单，但是它显示的菜单大小不同而不是相同。我将此菜单设置为平面列表项，并使用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>
)
}

Answer 1

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

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

Answer 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>

如何在React Native中设置固定的菜单大小？

2 个答案: