基础篇章:关于 React Native 之 Picker 组件的讲解
时间:2022-04-28
本文章向大家介绍基础篇章:关于 React Native 之 Picker 组件的讲解,主要内容包括Picker 的属性、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);
是不是非常简单,如果感觉非常简单,那就赶紧动手吧,看看能不能实现一个心中想要实现的漂亮效果呢?
- hihoCoder 1039:字符消除(字符串处理)
- 2017广东工业大学程序设计竞赛决赛 题解&源码(A,数学解方程,B,贪心博弈,C,递归,D,水,E,贪心,面试题,F,贪心,枚举,LCA,G,dp,记忆化搜索,H,思维题)
- hihoCoder 1051 补提交卡(贪心,枚举)
- LCA 最近公共祖先
- RMQ问题(线段树算法,ST算法优化)
- 统计0到n之间1的个数[数学,动态规划dp](经典,详解)
- Selenium2+python自动化40-cookie相关操作
- 【干货】PyTorch实例:用ResNet进行交通标志分类
- 2017年浙江理工大学程序设计竞赛校赛 题解&源码(A.水, D. 简单贪心 ,E.数论,I 暴力)
- Selenium2+python自动化41-绕过验证码(add_cookie)
- C语言求最小公倍数和最大公约数三种算法(经典)
- Selenium2+python自动化47-判断弹出框存在(alert_is_present)
- Free Pascal初次体验(有亮点哦)
- HDU 1312 Red and Black(DFS,板子题,详解,零基础教你代码实现DFS)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Linux提权姿势二:利用NFS提权
- 统计回归拟合方程参数
- biomaRt包实现不同物种之间同源基因转换
- 使用OpenCV和Python标记超像素色彩
- 听说,你的Loki还是单体?(上篇)
- 加一
- APP自动化测试系列之Appium介绍及运行原理
- 没想到吧,Markdown 还能这么玩!
- 致敬Vue3: 1.1万字从零解读Vue3.0源码响应式系统
- APP自动化测试系列之Desired Capabilities详解
- Kafka分区分配策略(Partition Assignment Strategy)
- 内网渗透-代理篇(一)
- java学习应用篇|逃不掉的HelloWorld
- java学习原理篇|java程序运行套路
- 架构师成长之路系列(二)