【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)
来源:互联网 发布:软件立项申请表 编辑:程序博客网 时间:2024/06/05 03:40
转载请标明出处:
http://blog.csdn.net/developer_jiangqq/article/details/50615736
本文出自:【江清清的博客】
(一)前言
【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org
今天我们一起来看一下Switch选择开关控件以及Picker选择器控件的介绍完全解析以及最佳实践。
刚创建的React Native技术交流3群(496508742),React Native技术交流4群(458982758),请不要重复加群!欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
(二)Switch选择开关控件
2.1.该为Android/iOS两个平台通用的两种状态的选择开关组件
2.2.Switch属性方法介绍(这边只介绍平台通用属性以及只适合Android平台上面的属性方法)
- View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
- disabled bool 如果该值为true,用户就无法点击switch开关控件,默认为false
- onValueChange function 方法,当该组件的状态值发生变化的时候回调方法
- value bool 该开关的值,如果该值为true的时候,开关呈打开状态,默认为false
2.3.Switch使用实例
①.基础Switch开关控件实例演示,添加点击开关状态切换,实例代码如下:
'use strict';import React, { AppRegistry, Component, StyleSheet, Text, View, Switch,} from'react-native';var SwitchDemo =React.createClass({ getInitialState() { return { trueSwitchIsOn: true, falseSwitchIsOn: false, }; }, render() { return ( <View style={styles.container}> <Text> Swtich实例 </Text> <Switch onValueChange={(value) =>this.setState({falseSwitchIsOn: value})} style={{marginBottom:10,marginTop:10}} value={this.state.falseSwitchIsOn}/> <Switch onValueChange={(value) =>this.setState({trueSwitchIsOn: value})} value={this.state.trueSwitchIsOn}/> </View> ); }});const styles =StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', },});AppRegistry.registerComponent('SwitchDemo',() => SwitchDemo);
运行效果如下:
②.Switch开关控件设置无法点击状态,该第一个Switch无法响应点击状态,实例代码如下:
var SwitchDemo =React.createClass({ getInitialState() { return { trueSwitchIsOn: true, falseSwitchIsOn: false, }; }, render() { return ( <View style={styles.container}> <Text> Swtich实例 </Text> <Switch disabled={true} onValueChange={(value) =>this.setState({falseSwitchIsOn: value})} style={{marginBottom:10,marginTop:10}} value={this.state.falseSwitchIsOn}/> <Switch disabled={false} onValueChange={(value) =>this.setState({trueSwitchIsOn: value})} value={this.state.trueSwitchIsOn}/> </View> ); }});
效果运行如下:
(三)Picker选择器控件
2.1.该Picker渲染iOS和Android平台上面的原生选择器组件,官方实例代码如下:
<Picker selectedValue={this.state.language} onValueChange={(lang) =>this.setState({language: lang})}> <Picker.Item label="Java" value="java" /> <Picker.Item label="JavaScript" value="js" /></Picker>
2.2.Picker属性方法(这边只介绍平台通用属性以及只适合Android平台上面的属性方法)
- View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
- onValueChange function方法,当选择器item被选择的时候进行调用。该方法被调用的时候回传入一下两个参数
itemValue:该属性值为被选中的item的属性值
itemPosition:该选择器被选中的item的索引position
- selectedValue: any任何参数值,选择器选中的item所对应的值,该可以是一个字符串或者一个数字
- style pickerStyleType 该传入style样式,设置picker的样式风格
- enabled bool 如果该值为false,picker就无法被点击选中。例如:用户无法进行做出选择
- mode enum ('dialog','dropdown') 选择器模式。在Android平台上面,设置mode可以控制用户点击picker弹出的样式风格
'dialog': 该值为默认值,进行弹出一个模态dialog(弹出框)
'dropdown':以picker视图为基础,在该视图下面弹出下拉框
- prompt string 设置picker的提示语(标题),在Android平台上面,模式设置成'dialog',显示弹出框的标题
3.3.Picker使用实例
①.基础选择器控件实例:弹出框,实例代码如下:
'use strict';import React, { AppRegistry, Component, StyleSheet, Text, View, Picker,} from'react-native';var PickerDemo =React.createClass({ getInitialState: function() { return { language: '', }; }, render() { return ( <View style={styles.container}> <Text > Picker选择器实例 </Text> <Picker style={{width:200}} selectedValue={this.state.language} onValueChange={(value) =>this.setState({language: value})}> <Picker.Itemlabel="Java" value="java" /> <Picker.Itemlabel="JavaScript" value="javaScript" /> </Picker> <Text>当前选择的是:{this.state.language}</Text> </View> ); }});const styles =StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', },});AppRegistry.registerComponent('PickerDemo',() => PickerDemo);
运行效果如下:
②.基础选择器控件实例:设置弹出框标题,实例代码如下:
var PickerDemo =React.createClass({ getInitialState: function() { return { language: '', }; }, render() { return ( <View style={styles.container}> <Text > Picker选择器实例 </Text> <Picker prompt="请选择编程语言" style={{width:200}} selectedValue={this.state.language} onValueChange={(value) =>this.setState({language: value})}> <Picker.Itemlabel="Java" value="java" /> <Picker.Itemlabel="JavaScript" value="javaScript" /> </Picker> <Text>当前选择的是:{this.state.language}</Text> </View> ); }});
运行效果如下:
③.基础选择器控件实例:设置下拉选择框,实例代码如下:
var PickerDemo =React.createClass({ getInitialState: function() { return { language: '', }; }, render() { return ( <View style={styles.container}> <Text > Picker选择器实例 </Text> <Picker mode={'dropdown'} style={{width:200}} selectedValue={this.state.language} onValueChange={(value) =>this.setState({language: value})}> <Picker.Itemlabel="Java" value="java" /> <Picker.Itemlabel="JavaScript" value="javaScript" /> </Picker> <Text>当前选择的是:{this.state.language}</Text> </View> ); }});
运行效果如下:
(四)最后总结
今天我们主要学习一下Switch选择开关控件以及Picker选择器控件的介绍完全解析以及最佳实践。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。
尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)
关注我的微博,可以获得更多精彩内容
- 【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)
- React Native控件之Switch开关与Picker选择器组件讲解以及使用
- React Native控件之Switch与Picker组件讲解
- 【React Native开发】React Native控件之ListView组件讲解以及最齐全实例(19)
- 【React Native开发】React Native控件之ToolbarAndroid工具栏控件讲解以及使用(15)
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- React Native组件之Switch和Picker和Slide
- 基础篇章:关于 React Native 之 Picker 组件的讲解
- React Native控件之Image组件讲解
- 【React Native开发】React Native控件之Image组件讲解与美团首页顶部效果实例(10)
- 【React Native开发】React Native控件之Image组件讲解与美团首页顶部效果实例(10)
- React Native控件之ToolbarAndroid工具栏控件讲解以及使用
- 【React Native开发】React Native控件之Text组件讲解(9)
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解(13)
- 【React Native开发】React Native控件之ScrollView组件讲解(14)
- React Native之Picker组件详解
- React-native 之Picker的使用
- 说明
- poj1009
- 小小笔记2
- POJ【数论/组合/博弈论】题目列表
- android学习之路(第一天)-开发环境
- 【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)
- CF 4A Watermelon
- B/S总结--前台攻略--JS
- 猜数字游戏的提示(Master-Mind Hints, UVa 340)
- 现世因果教育受益者分享(摘自132集)
- hdu 1896 Stone
- Lua获取object在全图中的位置
- Uva Children's Game
- 【算法-字符串】【周期串】