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

先知先觉

发布于 2019-01-21 11:27:31

9840

发布于 2019-01-21 11:27:31

文章被收录于专栏：伟大程序猿的诞生伟大程序猿的诞生

什么是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，则会禁用此选择器

5.mode(enum(‘dialog’, ‘dropdown’))

在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>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2016年12月27日，如有侵权请联系 cloudcommunity@tencent.com 删除

android

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

android

编程算法

登录后参与评论

0 条评论

热度