Question

我想像以下的本土反应那样,制造一种下降的菜单。请建议采取这种做法。

Answer 1

仅安装react-native-popup-menu ,并使用该软件,如 docs所解释。

可以通过使用 react-native-elements与本法典(Just for 3 dots):

import { Icon } from  react-native-elements ;

.
.
.

  <Icon
      name={ dots-three-vertical }
      type={ entypo }
      size={20}
      color= #FFF 
  />

Answer 2

I think you can use Picker component from react native and for the details you can read picker documentation:

编码实例:

import {View,Text,Picker} from  react-native ;

 //in your render method
 return (
  <View>
   <Text}>Choose</Text>
    <Picker
       selectedValue={this.state.menu}
       onValueChange={(itemValue, itemIndex) => this.setState({menu:emValue})}
       mode="dropdown">
       <Picker.Item label="Add Note" value="addnote" />
       <Picker.Item label="Share" value="share" />
       <Picker.Item label="Vault" value="vault" />
     </Picker>
  </View>
 );

我希望这一答案能够帮助你。

Answer 3

在一些人仍然寻求这种选择的情况下,我现在就把这一选择落实到我自己的肩上,首先,你们都需要在-Menu-Provider-Component 和当你(你需要做这一100%,否则不工作, pls读! docs)做的是,这里的门。

import { Feather } from  @expo/vector-icons ; 
import { Menu, MenuOptions, MenuOption, MenuTrigger} from  react-native-popup-menu ;
<Menu style={{marginRight:5}}>
   <MenuTrigger>
      <Feather name="menu" size={30} color="white" />
   </MenuTrigger>
      <MenuOptions>
         <MenuOption onSelect={() => alert(`pressed1`)} >
            <Text style={{color:  green }}>Option1</Text>
         </MenuOption>
         <MenuOption onSelect={() => alert(`pressed2`)} >
            <Text style={{color:  red }}>Option2</Text>
         </MenuOption>
         <MenuOption onSelect={() => alert(`pressed3`)} >
            <Text style={{color:  yellow }}>Option3</Text>
         </MenuOption>
      </MenuOptions>
   </Menu>

Like you see, I used an Icon which I placed inside the MenuTrigger component. I wanted to have an Icon which I click upon and after that the menu opens, exactly how the creator of this question wanted.

OnSelect executes a function which will be called if you choose the option in the dropdown menu, basicly its nothing else then onPress with a button.

友情链接