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);

效果图：

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