React Native Switch和Picker的认识

Switch属性方法
View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)

• disabled bool 如果该值为true,用户就无法点击switch开关控件，默认为false
• onValueChange function 方法，当该组件的状态值发生变化的时候回调方法
• value bool 该开关的值，如果该值为true的时候，开关呈打开状态，默认为false

<View style={styles.container}>    <Text>Switch实例</Text>    <Switch style={{marginTop:10, marginBottom:10, backgroundColor:'transparent'}}                       value={this.state.trueSwitchIsOn}                      onValueChange={ (value) => this.setState({trueSwitchIsOn:value}) }                      onTintColor='red'                      thumbTintColor='green'                      tintColor='blue'   />   <Switch value={this.state.falseSwitchIsOn}                      onValueChange={ (value) => this.setState({falseSwitchIsOn:value})}              />    </View>

效果图：

Picker 的属性

• onValueChange function 当选择器中的某一项被选中的时候进行回调此函数。回调时有如下两个参数：
• itemValue 被选中项的value属性
• itemPosition 被选中项所在的索引
• selectedValue any 默认选中的值，可谓字符串或者整数
• style pickerStyleType 样式
• enabled bool android 如果设置为false，就是禁止了选择器，不可用了
• mode enum(‘dialog’, ‘dropdown’) android 模式为dialog弹框形式，还是下拉菜单式的
• prompt string android 设置选择器的提示字符串。在Android的对话框模式中用作对话框的标题。
• itemStyle itemStylePropType ios 指定应用在每项标签上的样式

进行了两种模式的对比，貌似没有什么区别，纳闷中…

export default class firstRN extends Component {  constructor(props) {       super(props);        this.state = {         selected:' ',         dropdown:' ',        }    }  render(){     return(        <View style={styles.container}>           <Picker              prompt={'请选择'}             mode = {'dialog'}             style={{width:150}}             selectedValue={this.state.selected}             onValueChange={(value)=>this.setState({selected:value})}             >            <Picker.Item label="hello" value="key0" />            <Picker.Item label="world" value="key1" />            <Picker.Item label="弹框1" value="key2" />            <Picker.Item label="弹框2" value="key3" />           </Picker>              <Picker            mode={'dropdown'}            style={{width:150}}            selectedValue={this.state.dropdown}            onValueChange={(value)=>this.setState({dropdown:value})}>            <Picker.Item label="我是下拉菜单1" value="key0" />            <Picker.Item label="我是下拉菜单2" value="key1" />            <Picker.Item label="我是下拉菜单3" value="key2" />            <Picker.Item label="我是下拉菜单4" value="key3" />          </Picker>        </View>       );  }   onValueChange = (flag,value) => {    if(flag ==1){    this.setState({selected:value});    }else{      this.setState({dropdown:value});    }  };const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  }});AppRegistry.registerComponent('firstRN', () => firstRN);

效果图：

没太明天为什么效果是一样的。