【React Native开发】React Native控件之Switch开关与Picker选择器组件讲解以及使用(16)

转载请标明出处:

http://blog.csdn.net/developer_jiangqq/article/details/50615736

本文出自:【江清清的博客】

()前言

         今天我们一起来看一下Switch选择开关控件以及Picker选择器控件的介绍完全解析以及最佳实践。

         刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!

()Switch选择开关控件

         2.1.该为Android/iOS两个平台通用的两种状态的选择开关组件

         2.2.Switch属性方法介绍(这边只介绍平台通用属性以及只适合Android平台上面的属性方法)

  • View相关属性样式全部继承(例如:宽和高,背景颜色,边距等相关属性样式)
  • disabled bool 如果该值为true,用户就无法点击switch开关控件,默认为false
  • onValueChange function 方法,当该组件的状态值发生变化的时候回调方法
  • value bool 该开关的值,如果该值为true的时候,开关呈打开状态,默认为false                

          2.3.Switch使用实例

                .Switch关控件实例演示,添加点击开关状态切换,实例代码如下:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Switch,
} from'react-native';
var SwitchDemo =React.createClass({
  getInitialState() {
    return {
      trueSwitchIsOn: true,
      falseSwitchIsOn: false,
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text>
           Swtich实例
        </Text>
        <Switch
          onValueChange={(value) =>this.setState({falseSwitchIsOn: value})}
         style={{marginBottom:10,marginTop:10}}
          value={this.state.falseSwitchIsOn}/>
        <Switch
          onValueChange={(value) =>this.setState({trueSwitchIsOn: value})}
          value={this.state.trueSwitchIsOn}/>
      </View>
    );
  }
});
const styles =StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
AppRegistry.registerComponent('SwitchDemo',() => SwitchDemo);

运行效果如下:


  .Switch关控件设置无法点击状态,该第一个Switch无法响应点击状态,实例代码如下:

var SwitchDemo =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>
    );
  }
});

效果运行如下:


()Picker选择器控件

          2.1.Picker渲染iOSAndroid平台上面的原生选择器组件,官方实例代码如下:

<Picker
  selectedValue={this.state.language}
  onValueChange={(lang) =>this.setState({language: lang})}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
</Picker>

         2.2.Picker属性方法(这边只介绍平台通用属性以及只适合Android平台上面的属性方法)

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

          3.3.Picker使用实例

               .础选择器控件实例:弹出框,实例代码如下:

'use strict';
import React, {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  Picker,
} from'react-native';
var PickerDemo =React.createClass({
   getInitialState: function() {
    return {
      language: '',
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text >
          Picker选择器实例
        </Text>
        <Picker
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) =>this.setState({language: value})}>
          <Picker.Itemlabel="Java" value="java" />
          <Picker.Itemlabel="JavaScript" value="javaScript" />
        </Picker>
        <Text>当前选择的是:{this.state.language}</Text>
      </View>
    );
  }
});
const styles =StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});
AppRegistry.registerComponent('PickerDemo',() => PickerDemo);

运行效果如下:


 

  .础选择器控件实例:设置弹出框标题,实例代码如下:

var PickerDemo =React.createClass({
   getInitialState: function() {
    return {
      language: '',
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text >
          Picker选择器实例
        </Text>
        <Picker
          prompt="请选择编程语言"
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) =>this.setState({language: value})}>
          <Picker.Itemlabel="Java" value="java" />
          <Picker.Itemlabel="JavaScript" value="javaScript" />
        </Picker>
        <Text>当前选择的是:{this.state.language}</Text>
      </View>
    );
  }
});

运行效果如下:


 .础选择器控件实例:设置下拉选择框,实例代码如下:

var PickerDemo =React.createClass({
   getInitialState: function() {
    return {
      language: '',
    };
  },
  render() {
    return (
      <View style={styles.container}>
        <Text >
          Picker选择器实例
        </Text>
        <Picker
          mode={'dropdown'}
          style={{width:200}}
          selectedValue={this.state.language}
          onValueChange={(value) =>this.setState({language: value})}>
          <Picker.Itemlabel="Java" value="java" />
          <Picker.Itemlabel="JavaScript" value="javaScript" />
        </Picker>
        <Text>当前选择的是:{this.state.language}</Text>
      </View>
    );
  }
});

运行效果如下:


()最后总结

          今天我们主要学习一下Switch选择开关控件以及Picker选择器控件的介绍完全解析以及最佳实践。大家有问题可以加一下群React Native技术交流群(282693535)或者底下进行回复一下。

       尊重原创,转载请注明:From Sky丶清(http://blog.csdn.net/developer_jiangqq) 侵权必究!

       关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注,第一时间推送精彩文章)

     关注我的微博,可以获得更多精彩内容

      

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。

iOS开发实践之MD5加密 - 2016-02-01 14:02:20

什么是 MD5: 全称是 Message Digest Algorithm 5 ,译为 “ 消息摘要算法第 5 版 ” 效果:对输入信息生成唯一的 128 位散列值( 32 个字符) MD5 的特点: 输入两个不同的明文不会得到相同的输出值 根据输出值,不能得到原始的明文,即其过程 不可逆 MD5 的应用: 由于 MD5 加密算法具有较好的安全性,而且免费,因此该加密算法被广泛使用 主要运用在数字签名、文件完整性验证以及口令加密等方面 MD5改进: 加盐( Salt ):在明文的固定位置插入随机串,然后再

朋友圈滚动播放视频功能 - 2016-01-31 14:01:44

欢迎Follow我的 GitHub , 关注我的 CSDN . 在应用的信息流中, 用户会分享视频, 连续展示, 这就需要处理视频滚动播放. 然而, 在列表视图(RecyclerView)中使用MediaPlayer播放视频时, 会产生一些问题, 即无法同步控制视频的播放和停止. 使用控件库可以解决这一问题. 滚动播放功能 : 在页面中, 判断视频的可视比例, 最大视频项开始播放, 其余视频项关闭, 滚动中自动控制切换视频状态. 让我们来看看如何实现这一功能. 本文示例的Github 下载地址 . 使用的
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50612786 本文出自: 【江清清的博客】 ( 一 ) 前言         【好消息】个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏: http://www.lcode.org                今天我们一起来看一下工具栏控件 Tool BarAndroid 的介绍完全解析以及最佳实践。          刚创建的 React N
只用BQ24296的OTG+PMU充电,第1次接入U盘提示充电问题的解决   平台:msm8909+android5.1.1   目前由于BQ24296充电方式的电量显示还存在不少问题,改为只用BQ24296的OTG功能,还是采用PMU来充电,但发现第1次接入U盘提示充电  为什么会有这种情况,根源暂时没有找出来,但可以kernel\drivers\power\qpnp\linear-charger.c下的get_prop_batt_status()增加下面的处理可以避开此问题 static int ge
msm8909+android5.1.1 由BLSP3改为BLSP1后SPI读写速度慢问题解决   发现SPI的读写速度慢了不少,msm8909-cb03.dtsi文件相关内容如下: spi_0: spi@78b5000 { /* BLSP1 QUP1 */ compatible ="qcom,spi-qup-v2"; #address-cells = 1; #size-cells = 0; reg-names ="spi_physical", "spi_bam_physical"; reg = 0x78
转载请注明出处: http://blog.csdn.net/crazy1235/article/details/50612827 本篇文章对android的 Tween动画 和 帧动画 以及 布局动 画进行总结。 Tween动画 XML语法介绍 插值器 Interpolator 自定义Interpolator 公共XML属性及对应的方法 ScaleAnimation 缩放动画 xml定义缩放动画 代码定义缩放动画 RotateAnimation 旋转动画 xml中设置旋转动画 代码中设置旋转动画 Tran

swift算法手记-7 - 2016-01-30 14:01:54

@IBAction func compute(sender: AnyObject) { // 19*x^7-31*x^5+16*x^2+7*x-90=0 // newton迭代法求一元方程的解,最大求解范围[-100000,100000] mytitle.stringValue="19*x^7-31*x^5+16*x^2+7*x-90=0" let trycount = 120 var accuracy: Double = 1e-15 var answer: Double?=nil // 估计解范围 va

android中生成excel - 2016-01-30 14:01:50

都说程序员不爽产品经理,其实有的时候遇到一些奇葩的后台开发人员也会很不顺心。最近项目有这样一个要求,要生成一个excel然后发邮件给客户。结果后台人员直接把这个功能扔给客户端,理由是后台不好实现。听到这也就只能自己实现了(分分钟就想来个螺旋王扣它头上)。这篇博客讲下如下在android中生成excel表并存到本地。先看下生成后的效果图: 初始化数据 首先我们要先造下测试数据,这里我把数据写死在一个常量类Const中,如下: public class Const { public interface Ord
Android特效专辑(八)——实现心型起泡飞舞的特效,让你的APP瞬间暖心 马上也要放年假了,家里估计会没网,更完这篇的话,可能要到年后了,不过在此期间会把更新内容都保存在本地,这样有网就可以发表了,也是极好的,今天说的这个特效,原本是Only上的一个小彩蛋的,我们来看看图片 只要我点击了Only这个字,下面就开始上升起起泡了,这个实现起来其实就是一个欲盖弥彰的动画而已,准备好三张颜色不一样的心型图片咯,这样的话,我们就开始动手来写一写吧! 首先新建一个工程——HeartFaom 准备工作就是准备图片咯
最近在写一个时间戳系统记录系统中各个模块一些重要的时间节点。获取内核上报的时间戳是通过进程轮询的方式,但是发现该进程在实际运行中CPU占用率很高,其中就是一个死循环在读取设备文件,本以为是由于读系统调用太频繁的原因。 于是又写一个测试程序,其中仅仅是个空循环。结果发现该程序的CPU占用率居然在90%多! 针对这个问题我有2个疑问,对这些疑问的理解也记录在此,与大家分享。 1 linux系统是时间片调度算法,微观上所有可运行进程都是串行,不管进程中作何操作,该进程的时间片一到就切换到下一进程,那为什么一个空