react-native 下拉框

一、下载

npm install react-native-dropdown-picker

二、使用

import DropDownPicker from 'react-native-dropdown-picker'


<DropDownPicker
    items={options}
    value={curAreaCode}
    open={open}
    setOpen={() => setOpen(true)}
    onClose={() => setOpen(false)}
    onSelectItem={val => selectItem(val)}
    style={{
      borderColor: 'transparent',
      borderWidth: 0,
      width: 80,
      backgroundColor: 'transparent',
    }}
    containerStyle={{width: 82}}
    labelStyle={{color: '#2F3844', fontSize: 17}}
    dropDownContainerStyle={{
      backgroundColor: 'white',
      borderColor: 'transparent',
      borderWidth: 0,
      zIndex: 6,
    }}
  ArrowDownIconComponent={() => (
    <Image source={require('../assets/images/downIcon.png')} style={styles.dropIcon}/>
    )} //下拉的icon
  ArrowUpIconComponent={() => (
    <Image source={require('../assets/images/upIcon.png')} style={styles.dropIcon}/>
  )}  //上的是时候icon
  />

注：下拉框所在的父级需要比同级别的层级高

官网 https://hossein-zare.github.io/react-native-dropdown-picker-website