ejemplo de código del menú desplegable react-native

Ejemplo 1: menú desplegable de reacción nativa

// How to install
npm install --save react-native-material-dropdown

// How to useimportReact,Componentfrom'react';importDropdownfrom'react-native-material-dropdown';classExampleextendsComponentrender()let data =[      value:'Banana',,      value:'Mango',,      value:'Pear',];return(<Dropdown        
      label='Favorite Fruit'        
      data=data/>);

Ejemplo 2: cómo hacer que su propio menú desplegable reaccione de forma nativa

importReact,Componentfrom"react";importPicker,View,Text,StyleSheetfrom"react-native";exportdefaultclassCategoryScreenextendsComponent
  state =
    selectedcat:"",
    category:[
        itemName:"Samsung M20",
        itemName:"Nokia",
        itemName:"Apple",
        itemName:"Samsung M23",
        itemName:"Samsung M24",
        itemName:"Samsung M25"];asynconValueChangeCat(value)this.setState( selectedcat: value );render()return(<View style=styles.viewStyle><View style= flex:0.3><Text style=styles.textStyle>Categories</Text></View><View style= flex:0.7, fontSize:14><Picker
            itemStyle=styles.itemStyle
            mode="dropdown"
            style=styles.pickerStyle
            selectedValue=this.state.selectedcat
            onValueChange=this.onValueChangeCat.bind(this)>this.state.category.map((item, index)=>(<Picker.Item
                color="#0087F0"
                label=item.itemName
                value=item.itemName
                index=index/>))</Picker></View></View>);const styles =StyleSheet.create(
  viewStyle:
    flex:1,
    alignSelf:"center",
    flexDirection:"row",
    width:"92%",
    justifyContent:"space-between",
    alignItems:"center",
  itemStyle:
    fontSize:10,
    fontFamily:"Roboto-Regular",
    color:"#007aff",
  pickerStyle:
    width:"100%",
    height:40,
    color:"#007aff",
    fontSize:14,
    fontFamily:"Roboto-Regular",
  textStyle:
    fontSize:14,
    fontFamily:"Roboto-Regular");

Aquí puedes ver las comentarios y valoraciones de los lectores

Si crees que ha sido de ayuda nuestro post, sería de mucha ayuda si lo compartieras con otros juniors de este modo contrubuyes a difundir nuestra información.

---

---

Utiliza Nuestro Buscador