基础篇章:关于 React Native 之 Picker 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间)

今天我们就讲Picker ,顾名思义就是选择器。用法也是相当的简单。这里我们直接就看属性吧。

Picker 的属性

  • onValueChange function 当选择器中的某一项被选中的时候进行回调此函数。回调时有如下两个参数:
    • itemValue 被选中项的value属性
    • itemPosition 被选中项所在的索引
  • selectedValue any 默认选中的值,可谓字符串或者整数
  • style pickerStyleType 样式
  • enabled bool android 如果设置为false,就是禁止了选择器,不可用了
  • mode enum('dialog', 'dropdown') android 模式为dialog弹框形式,还是下拉菜单式的
  • prompt string android 设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。
  • itemStyle itemStylePropType ios 指定应用在每项标签上的样式

Picker实例

来看看实例演示的效果图,如下:

实例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Picker,
  Text,
  View
} from 'react-native';

export default class PickerDemo extends Component {
  state = {
    selected:' ',
    dropdown:' ',
  }
  render() {
    return (
      <View style={styles.container}>
       <Picker
            prompt="弹框Dialog"
            style={styles.picker}
            selectedValue={this.state.selected}
            onValueChange={(value)=>this.onValueChange(1,value)}>
            <Picker.Item label="hello" value="key0" />
            <Picker.Item label="world" value="key1" />
             <Picker.Item label="弹框1" value="key2" />
            <Picker.Item label="弹框2" value="key3" />
          </Picker>
          <Picker
            mode={'dropdown'}
            style={{width:150}}
            selectedValue={this.state.dropdown}
            onValueChange={(value)=>this.onValueChange(2,value)}>
            <Picker.Item label="我是下拉菜单1" value="key0" />
            <Picker.Item label="我是下拉菜单2" value="key1" />
            <Picker.Item label="我是下拉菜单3" value="key2" />
            <Picker.Item label="我是下拉菜单4" value="key3" />
          </Picker>
      </View>
    );
  }

  onValueChange = (flag,value) => {
    if(flag ==1){
    this.setState({selected:value});
    }else{
      this.setState({dropdown:value});
    }
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  picker: {
    width: 100,
  },
});

AppRegistry.registerComponent('PickerDemo', () => PickerDemo);

是不是非常简单,如果感觉非常简单,那就赶紧动手吧,看看能不能实现一个心中想要实现的漂亮效果呢?

原文发布于微信公众号 - 非著名程序员(non-famous-coder)

原文发表时间:2016-12-07

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大壮

iOS 动画(理论篇)

1705
来自专栏程序员宝库

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

1483
来自专栏Flutter入门

Flutter开发实战分析-animation_demo解析导读

以下代码基本参考于 flutter_gallery中的animation_demo示例。(可以结合本文看源码) 整体动画效果预览

8703
来自专栏hightopo

基于 HTML5 Canvas 的工控机柜 U 位动态管理

2594
来自专栏一“技”之长

iOS高质量的动画实现解决方案——Lottie

    真心的认为Lottie是一款十分优秀且实用的动画开发库,不只对于iOS和android原生开发者来说其让复杂动画的实现几乎没有成本,对于设计师来说,它的...

1322
来自专栏carven

利用canvas实现毛笔字帖(一)

最近在慕课网上找到了很好的canvas教程, 来自 @liuyubobobo 的 学写一个字 canvas绘图教程 在 @liuyubobobo 老师的系列ca...

1872
来自专栏Web项目聚集地

Javascript将HTML转成PDF并下载「支持多页」

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览...

3492
来自专栏冰霜之地

Weex 事件传递的那些事儿

在前两篇文章里面分别谈了Weex如何在Native端初始化的和Weex是如何高效的渲染Native的原生UI的。Native这边还缺一块,那就是Native产生...

2214
来自专栏IT派

Javascript 将 HTML 页面生成 PDF 并下载

最近碰到个需求,需要把当前页面生成 pdf,并下载。弄了几天,自己整理整理,记录下来,我觉得应该会有人需要 :)

2841
来自专栏Python小屋

Python使用tkinter打造自定义对话框完整代码

问题来源:前一阵发过一个技术文章Python编写抽奖式随机提问程序,其中有个弹出式对话框,好像上海科技大学宋老师在群里当时问了一句对话框中中奖姓名是否能显示的大...

5424

扫码关注云+社区

领取腾讯云代金券