【React Native 安卓开发】----(Picker)【第四篇】

来源：互联网发布：员工管理系统 java 编辑：程序博客网时间：2024/06/05 03:22

什么是Picker？

Picker可以在iOS和Android上渲染原生的选择器（Picker）

Picker基本用法

<Picker  selectedValue={this.state.language}  onValueChange={(lang) => this.setState({language: lang})}>  <Picker.Item label="Java" value="java" />  <Picker.Item label="JavaScript" value="js" /></Picker>

Picker 基本属性

1.onValueChange (function)

某一项被选中时执行此回调。调用时带有如下参数：
itemValue: 被选中项的value属性
itemPosition: 被选中项在picker中的索引位置

2.selectedValue(any)

默认选中的值。可以是字符串或整数。

3.style(pickerStyleType)

样式通用的style

4.enabled(boolean)

如果设为false，则会禁用此选择器

在Android上，可以指定在用户点击选择器时，以怎样的形式呈现选项：
dialog（对话框形式）: 显示一个模态对话框。默认选项。
dropdown（下拉框形式）: 以选择器所在位置为锚点展开一个下拉框。

6.prompt(String)

设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。

《=============================================================

下面是一个小DEMO

这里写图片描述

import React, { Component } from 'react'; import {  AppRegistry,  StyleSheet,  Text,  View,  PixelRatio,  TouchableOpacity,  Picker,} from 'react-native';class hello extends Component {  constructor(props){    super(props);    this.state = {      language :null    };  }  render(){    return (      <View style={{flex:1,marginTop:40}}>        <Picker          selectedValue={this.state.language}          onValueChange={lang => this.setState({language:lang})}          mode='dropdown'          style={{color:'#ff0000'}}          >          <Picker.Item label='java' value='java' color='#ff00ff' />           <Picker.Item label="JavaScript" value="js" color='#ff0f00' />          <Picker.Item label="C语言" value="c" />          <Picker.Item label="PHP开发" value="php" color='#0000ff'/>        </Picker>      </View>    );  }}AppRegistry.registerComponent('hello', () => hello);

《=============================================================

这里mode=’dialog’

这里写图片描述

return (      <View style={{flex:1,marginTop:40}}>        <Picker          selectedValue={this.state.language}          onValueChange={lang => this.setState({language:lang})}          mode='dialog'          style={{color:'#ff0000'}}          >          <Picker.Item label='java' value='java' color='#ff00ff' />           <Picker.Item label="JavaScript" value="js" color='#ff0f00' />          <Picker.Item label="C语言" value="c" />          <Picker.Item label="PHP开发" value="php" color='#0000ff'/>        </Picker>      </View>    );

《=============================================================

这里mode=’dialog’，prompt=’选择器在Dialog下使用’

prompt只有在mode是Dialog时候才起作用

这里写图片描述

<View style={{flex:1,marginTop:40}}>        <Picker          selectedValue={this.state.language}          onValueChange={lang => this.setState({language:lang})}          mode='dialog'          style={{color:'#ff0000'}}          prompt='选择器 在Dialog下使用'          >          <Picker.Item label='java' value='java' color='#ff00ff' />           <Picker.Item label="JavaScript" value="js" color='#ff0f00' />          <Picker.Item label="C语言" value="c" />          <Picker.Item label="PHP开发" value="php" color='#0000ff'/>        </Picker>      </View>