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

效果图：

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