轉載請標明出處:
[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);
~~~
運行效果如下:

??②.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](http://blog.csdn.net/developer_jiangqq)) 侵權必究!
? ? ? ?關注我的訂閱號(codedev123),每天分享移動開發技術(Android/IOS),項目管理以及博客文章!(歡迎關注,第一時間推送精彩文章)

? ? ?關注我的微博,可以獲得更多精彩內容
? ? ??[](http://weibo.com/u/1855428195?s=6uyXnP)
- 前言
- React Native For Android環境配置以及第一個實例(1)
- React Native開發IDE安裝及配置(2)
- React Native應用設備運行(Running)以及調試(Debugging)(3)
- React Native移植原生Android項目(4)
- React Native進行簽名打包成Apk(5)
- React Native庫版本升級(Upgrading)與降級講解(6)
- React Native控件之View視圖講解(7)
- React Native配置運行官方例子-初學者的福音(8)
- React Native控件之Text組件講解(9)
- React Native控件之Image組件講解與美團首頁頂部效果實例(10)
- TextInput組件講解與QQ登錄界面實現(11)
- ProgressBarAndroid進度條講解(12)
- DrawerLayoutAndroid抽屜導航切換組件講解(13)
- ScrollView組件講解(14)
- ToolbarAndroid工具欄控件講解以及使用(15)
- Switch開關與Picker選擇器組件講解以及使用(16)
- ViewPagerAndroid講解以及美團首頁頂部效果實例(17)
- Touchable*系列組件詳解(18)
- React Native專題文章講解,不斷更新中.....
- ListView組件講解以及最齊全實例(19)
- 超詳細Windows版本編譯運行React Native官方實例UIExplorer項目(多圖慎入)
- React Native超棒的LayoutAnimation(布局動畫)
- PullToRefreshViewAndroid下拉刷新組件講解(20)
- RefreshControl組件詳解(21)
- WebView組件詳解以及實例使用(22)