React Native Picker 组件的 mode 属性

返回上一级

React Native 组件的 mode 属性指定在用户点击选择器时,以怎样的形式呈现选项

注意

这个属性只有 Android 上才能用, iOS 上是不生效的。

导入模块

import {Picker} from 'react-native'

可选的值

mode 属性有两个可选值

说明
dropdown 默认,以下拉列表的形式呈现选项
dialog 以对话框的形式呈现选项

使用语法

Picker 组件的 mode 属性的使用方式如下

<Picker
  mode = {'dialog|dropdown'}
</Picker>

范例

  1. mode='dropdown'

    在 Android 上, Picker 组件默认是以下拉列表的形式呈现选项的。

    也就是说,设置 mode='dropdown' 和不设置 mode 属性是一样的

    <Picker
      selectedValue={this.state.language}
      style={{height: 50, width: 100}}
      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='dialog'

    当我们设置 mode='dialog' ,那么在 Android 上,选择器则会以弹出框的形式呈现选项

    <Picker
      selectedValue={this.state.language}
      mode={'dialog'}
      style={{height: 50, width: 100}}
      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-2018 简单教程 twle.cn All Rights Reserved.