React Native如何实现多选下拉并解决选项不显示问题？

你使用react-native-dropdown-picker实现多选时选项不显示，核心问题有两个：

• schema字段映射错误：你的数据源offerEmails中公司名称字段为name，但配置里错误将label映射到了不存在的company字段，直接导致选项渲染失败
• 未配置自定义项渲染规则，默认组件仅会渲染label字段，无法实现你需要的「公司名称+对应邮箱」双列展示效果；另外该组件对父容器层级、初始值类型有强制要求，配置不当也会出现下拉层不显示、选项被遮挡的问题。

首先确保组件状态定义符合多选要求，多选模式下选中值必须为数组类型：

// 组件状态定义
const [open, setOpen] = useState(false);
const [selectedEmails, setSelectedEmails] = useState([]); // 多选值初始化为空数组
const [emails, setEmails] = useState(offerEmails); // 直接使用路由传入的offerEmails作为数据源

修正后的下拉选择器组件代码，样式和布局完全对齐你之前的单选版本：

<View style={{ zIndex: open ? 1000 : 1 }}>
  <DropDownPicker
    schema={{
      label: 'name', // 修正字段映射，对应数据源里的公司名称字段
      value: 'offer_email'
    }}
    theme='DARK'
    placeholder='Sähköposti'
    multiple={true}
    min={0}
    max={5}
    open={open}
    value={selectedEmails}
    items={emails}
    setOpen={setOpen}
    setValue={setSelectedEmails}
    setItems={setEmails}
    mode="BADGE"
    badgeDotColors={["#e76f51", "#00b4d8", "#e9c46a", "#e76f51", "#8ac926", "#00b4d8", "#e9c46a"]}
    // 自定义渲染列表项，和原单选版本的EmailItem布局一致
    renderListItem={({ item }) => {
      const { optionText } = GlobalStyle
      return (
        <View style={{flex: 1, flexDirection: 'row', justifyContent: 'space-evenly', paddingVertical: 10}}>
          <View style={{flexDirection: 'column', width: '45%'}}>
            <Text style={optionText}>{item.name}</Text>
          </View>
          <View style={{flexDirection: 'column', width: '55%'}}>
            <Text style={optionText}>{item.offer_email}</Text>
          </View>
        </View>
      )
    }}
    // 样式对齐原单选版本
    style={{
      backgroundColor: 'transparent',
      borderColor: 'transparent'
    }}
    placeholderStyle={{ color: colors.white_087, fontSize: 18 }}
    textStyle={{ color: colors.white_087 }}
    dropDownContainerStyle={{
      backgroundColor: colors.black_021,
      borderColor: 'transparent'
    }}
  />
</View>

• 组件外层必须包裹View并动态设置zIndex，打开下拉时调高容器层级，避免下拉层被其他组件遮挡。如果下拉选择器放在ScrollView/FlatList等滚动容器内，还需要给滚动容器加keyboardShouldPersistTaps="handled"属性
• 多选模式下value初始值必须是数组类型，禁止传入字符串、null或undefined，否则会触发组件内部渲染错误
• 如果不需要徽章样式展示选中值，可以把mode属性改为SIMPLE，选中值会直接以文本拼接形式显示在选择框内
• 同页面存在多个下拉选择器时，需要给每个组件设置不同的zIndex值，避免层级冲突

内容的提问来源于stack exchange，提问作者Jukka Koivu