Как можно установить размер меню фиксированным в реагировать родной?

Question

Я настраиваю меню параметров, когда нажимаю на значок, но оно показывает размеры меню, отличающиеся от одинаковых.Я устанавливаю это меню как элемент плоского списка, использую библиотеку реагировать-родное-всплывающее меню и любой другой способ отображения меню. Я хочу использовать пункты меню с фиксированной высотой и шириной каждого из них.Вот мой код: -

_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

Я сделал это, но я не смог показать меню поверх текста

и вот мой новый код: -

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

Answer 2

Пожалуйста, передайте customStyles как опору для MenuOptions и MenuOption.

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