<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                ??碼云GVP開源項目 12k star Uniapp+ElementUI 功能強大 支持多語言、二開方便! 廣告
                轉載請標明出處: [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)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看