react-native - 反应原生 NAVITE BASE 选择器如何禁用选择器项目

Question

我正在使用本机基础选择器包进行本机反应。

我想禁用某些项目，但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-nativepickernative-base

Answer 1

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

以下是我在文档中找到的示例。通过将isDisabled道具添加到<Select.Item />forC和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>

Snack 中的完整工作代码示例