React Native中Native Base Picker组件如何禁用指定Picker.Item选项

问题原因与解决方案 #

1. 属性名错误 #

Native Base Picker.Item的禁用属性为disabled，接收布尔值，而非enable/disable参数，属性名拼写错误会导致配置不生效。

2. iOS平台原生适配限制 #

Native Base的Picker组件在iOS端底层封装的是iOS原生UIPickerView，v2.x等多数版本未对disabled属性做原生层面的选中拦截，仅添加属性不会阻止选中生效，需要额外在值变更回调中做逻辑拦截。

具体实现代码 #

import { Picker } from 'native-base';

// 预先定义禁用的value列表，方便后续维护
const disabledValues = ['34'];

<Picker
  iosHeader="VALUES"
  mode="dropdown"
  style={{ margin: 0, padding: 0 ,width:180,color:"#fff", justifyContent:"center",alignItems:"center" , textAlign:"center" }}
  placeholder="Select one"
  placeholderStyle={{ color: "#fff" }}
  placeholderIconColor="#fff"
  headerBackButtonText="Back"
  headerStyle={{ backgroundColor: "#ff705a" }}
  headerTitleStyle={{ color: "white" }}
  headerBackButtonTextStyle={{ color: "white" }}
  selectedValue={this.state.selectedVal}
  onValueChange={(value) => {
    // 拦截禁用值，选中禁用项时不更新状态
    if (disabledValues.includes(value)) return
    this.onchange(value)
  }}
  textStyle={{ textAlign:"center", color:"#fff"}}
>
  <Picker.Item  value='' label='Select' />
  {/* 给禁用项添加disabled属性，同时修改文字样式做视觉区分 */}
  <Picker.Item label="SELECT ONE" value="34" disabled={true} textStyle={{color: '#ccc'}} />
  {/* 其他正常选项 */}
  <Picker.Item label="正常选项1" value="1" />
</Picker>

补充说明 #

如果使用的是Native Base v3及以上版本，Picker组件已被官方废弃，推荐使用官方替代组件Select，该组件的isDisabled属性对iOS、Android双端默认生效，无需额外逻辑拦截。

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