Switch開關與Picker選擇器組件講解以及使用(16) · React Native學習指南

轉載請標明出處： [http://blog.csdn.net/developer_jiangqq/article/details/50615736](http://blog.csdn.net/developer_jiangqq/article/details/50615736) 本文出自:[【江清清的博客】](http://blog.csdn.net/developer_jiangqq) # (一)前言 ???????【好消息】個人網站已經上線運行,后面博客以及技術干貨等精彩文章會同步更新，請大家關注收藏:[http://www.lcode.org](http://www.lcode.org/)?????? ? ? ? 今天我們一起來看一下Switch選擇開關控件以及Picker選擇器控件的介紹完全解析以及最佳實踐。 ?????????剛創建的React Native技術交流1群(282693535),React Native交流2群:(496601483)，請不要重復加群！歡迎各位大牛,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); ~~~ 運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc025b0b7.jpg) ??②.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> ); } }); ~~~ 效果運行如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc026b727.jpg) # (三)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); ~~~ 運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc028cb1c.jpg) ?![](https://box.kancloud.cn/2016-02-29_56d3fc029e706.jpg) ??②.基礎選擇器控件實例:設置彈出框標題,實例代碼如下: ~~~ 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> ); } }); ~~~ 運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc02b144b.jpg) ?③.基礎選擇器控件實例:設置下拉選擇框,實例代碼如下: ~~~ 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> ); } }); ~~~ 運行效果如下: ![](https://box.kancloud.cn/2016-02-29_56d3fc02c4870.jpg) # (四)最后總結 ??????????今天我們主要學習一下Switch選擇開關控件以及Picker選擇器控件的介紹完全解析以及最佳實踐。大家有問題可以加一下群React Native技術交流群(282693535)或者底下進行回復一下。 ? ? ? ?尊重原創，轉載請注明：From Sky丶清（[http://blog.csdn.net/developer_jiangqq](http://blog.csdn.net/developer_jiangqq)）侵權必究！ ? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注，第一時間推送精彩文章) ![](https://box.kancloud.cn/2016-02-29_56d3fbf75e010.jpg) ? ? ?關注我的微博，可以獲得更多精彩內容 ? ? ??[![](https://box.kancloud.cn/2016-02-29_56d3fc00eb890.png)](http://weibo.com/u/1855428195?s=6uyXnP)