React Native 的 Picker 组件的 enabled 属性

返回上一级

React Native 中的 Picker 是一个始终都会显示的组件,因此没有属性可以用来设置是否显示。

但 React Native 的 Picker 提供了 enabled 属性用于设置该选择器是否可用。

enabled 属性的值是一个布尔类型的值,true 表示 可用false 表示 不可用

  1. enabled={true} 这是默认值,表示该选择器可用,这个在 UI 上的表现就是: 正常显示且可点击
  2. enabled={false} 表示该选择器不可用,这个在 UI 上的表现就是: 变灰且不可点击

该属性的默认值为 true 也就是显示

导入模块

import {Picker} from 'react-native'

使用语法

Picker 组件可用

<Picker enabled={true} </Picker>

Picker 组件不可用

<Picker enabled={false} </Picker>

范例

  1. 因为 mode 属性的默认值为 true ,所以不设置和设置 enabled={true} 是相同的,都表示组件可用

    可用的 Picker 组件, UI 呈现为 正常颜色且可点击

    <Picker
      selectedValue={this.state.language}
      style={{height: 50, width: 100}} 
      enabled={true}
      onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
      <Picker.Item label="Java" value="java" />
      <Picker.Item label="JavaScript" value="js" />
      <Picker.Item label="简单教程" value="twle" />
    </Picker>
    
  2. 如果我们将 mode 属性的值设置为 false ,那么 Picker 组件将不可用,但还是会显示。

    不可用的 Picker 组件, UI 呈现为 灰色且不可点击

    <Picker
      selectedValue={this.state.language}
      style={{height: 50, width: 100}} 
      enabled={false}
      onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
      <Picker.Item label="Java" value="java" />
      <Picker.Item label="JavaScript" value="js" />
      <Picker.Item label="简单教程" value="twle" />
    </Picker>
    

返回上一级

React Native 中文文档

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.