React-Native学习笔记-Switch和Picker

Posted by Lazy on July 1, 2016
  • Switch是我们的一个选择开关控件
  • Picker类似于按钮底部弹出的popwindow

Switch属性方法介绍

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • disabled bool 如果该值为true,用户就无法点击switch开关控件,默认为false
  • onValueChange function 方法,当该组件的状态值发生变化的时候回调方法
  • value bool 该开关的值,如果该值为true的时候,开关呈打开状态,默认为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=
          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被选择的时候进行调用。该方法被调用的时候回传入一下两个参数

      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',显示弹出框的标题