- Switch是我們的一個選擇開關控件
- Picker類似于按鈕底部彈出的popwindow
Switch屬性方法介紹
- View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
- disabled bool 如果該值為true,用戶就無法點擊switch開關控件蜒滩，默認為false
- onValueChange function 方法粉怕，當該組件的狀態(tài)值發(fā)生變化的時候回調方法
- value bool 該開關的值筐骇，如果該值為true的時候垂蜗，開關呈打開狀態(tài)中狂，默認為false
Switch使用實例
'use strict';
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Switch,
} from 'react-native';
//引入
var RnDemo = 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>
);
}
});
const styles = StyleSheet.create({
container: {
flex: 1, //定義了flex屬性標示當前的屬性的可伸縮的
backgroundColor: '#efefef',
justifyContent: 'center',
alignItems: 'center',
height: 1280,
},
style_bottom: {
flex: 1,
flexDirection: 'row',//代表一行
alignItems: 'flex-end',//在底部
bottom: 10,//距離底部10
},
style_longin: {
marginTop: 15,
marginLeft: 10,
marginRight: 10,
backgroundColor: '#63B8FF',
height: 35,
borderRadius: 5,
alignItems: 'center',//內部控件居中
justifyContent: 'center',//子控件位于父容器的居中
},
style_userinput: {
marginTop: 10,
backgroundColor: '#FFFFFF',
height: 35,
textAlign: "center"
},
style_image: {
borderRadius: 35,
height: 70,
width: 70,
marginTop: 40,
alignSelf: 'center',
},
style_view_unlogin: {
fontSize: 12,
color: '#63B8FF',
marginLeft: 10,
},
style_view_register: {
fontSize: 12,
color: '#63B8FF',
marginRight: 10,
alignItems: 'flex-end',
flex: 1,
textAlign: 'right',//文字靠右
}
});
AppRegistry.registerComponent('RnDemo', () => RnDemo);
Picker選擇器控件
Picker屬性方法
-
View相關屬性樣式全部繼承(例如:寬和高,背景顏色,邊距等相關屬性樣式)
- onValueChange function方法,當選擇器item被選擇的時候進行調用恭垦。該方法被調用的時候回傳入一下兩個參數(shù)itemValue:該屬性值為被選中的item的屬性值 itemPosition:該選擇器被選中的item的索引position selectedValue: any任何參數(shù)值，選擇器選中的item所對應的值晤斩，該可以是一個字符串或者一個數(shù)字 style pickerStyleType 該傳入style樣式，設置picker的樣式風格 enabled bool 如果該值為false禽作，picker就無法被點擊選中尸昧。例如:用戶無法進行做出選擇 mode enum ('dialog','dropdown') 選擇器模式揩页。在Android平臺上面旷偿，設置mode可以控制用戶點擊picker彈出的樣式風格 'dialog': 該值為默認值，進行彈出一個模態(tài)dialog(彈出框) 'dropdown':以picker視圖為基礎爆侣，在該視圖下面彈出下拉框 prompt string 設置picker的提示語(標題),在Android平臺上面萍程，模式設置成'dialog',顯示彈出框的標題
