反应本机 NATIVE BASE 选择器如何禁用选择器项目答案

【问题标题】：React native NAVITE BASE picker how to disable picker item反应本机 NATIVE BASE 选择器如何禁用选择器项目
【发布时间】：2021-09-10 11:40:49
【问题描述】：

我正在为 react-native 使用原生基础选择器包。

我想禁用一些项目，但是enable disable params 不起作用，所有元素仍然可以选择。

我正在 ios 中测试应用程序。这是我的代码

import { Picker } from 'native-base';

<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) => this.onchange(value)}
              textStyle={{ textAlign:"center" }}
              textStyle={{color:"#fff"}}
              
            >
            <Picker.Item  value='' label='Select' />
            <Picker.Item label="SELECT ONE" value="34" />

</Picker>

【问题讨论】：

标签： react-native picker native-base

【解决方案1】：

在 NativeBase v2 到 v3 的更新中，Picker 组件被正式替换为Select。希望这仍然对您有所帮助！我无法让 Picker 组件在 Expo Snack 上工作¯_(ツ)_/¯

以下是我在文档中找到的示例。通过将isDisabled 属性添加到<Select.Item /> 以获取C 和Java。这个道具阻止了在 iOS 和 Android 上选择这些选项的能力。在我的测试中，这在 Web 上不起作用。

<Select
    selectedValue={value}
    _selectedItem={{
        bg: "red.600",
        endIcon: <CheckIcon size={5} />,
    }}
>
    <Select.Item label="JavaScript" value="js" />
    <Select.Item label="TypeScript" value="ts" />
    <Select.Item label="C" value="c" isDisabled />
    <Select.Item label="Python" value="py" />
    <Select.Item label="Java" value="java" isDisabled />
</Select>

Full working code example in Snack here

【讨论】：