这个组件很简单 主要有两个属性:开、关。。。。呵呵哒,,,

  1. import React,{Component}from 'react';
  2. import {
  3. AppRegistry,
  4.  
  5. StyleSheet,
  6. Text,
  7. View,
  8. Switch,
  9. } from 'react-native';
  10.  
  11. var SwitchDemo = React.createClass({
  12. getInitialState() {
  13. return {
  14. trueSwitchIsOn: true,
  15. falseSwitchIsOn: false,
  16. };
  17. },
  18. render() {
  19. return (
  20. <View style={styles.container}>
  21. <Text>
  22. Swtich实例
  23. </Text>
  24. <Switch
  25. onValueChange={(value) => this.setState({falseSwitchIsOn: value})}
  26. style={{marginBottom:10,marginTop:10}}
  27. value={this.state.falseSwitchIsOn} />
  28. <Switch
  29. onValueChange={(value) => this.setState({trueSwitchIsOn: value})}
  30. value={this.state.trueSwitchIsOn} />
  31. </View>
  32. );
  33. }
  34. });
  35. const styles = StyleSheet.create({
  36. container: {
  37. flex: 1,
  38. justifyContent: 'center',
  39. alignItems: 'center',
  40. backgroundColor: '#F5FCFF',
  41. },
  42. });
  43. AppRegistry.registerComponent('Allen', () => SwitchDemo);

  然后呈现的小效果是~~~~~

React Native控件之Switch开关的更多相关文章

  1. React Native控件只TextInput

    TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...

  2. 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)

    ),React Native技术交流4群(458982758),欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! Im ...

  3. 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件解说(13)

    ),请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该DrawerLayoutAndroid组件封 ...

  4. 【React Native开发】React Native控件之ProgressBarAndroid进度条解说(12)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者增加交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  5. React Native控件之Listview

    ListView组件用于显示一个垂直的滚动列表,其中的元素之间结构近似而仅数据不同. ListView更适于长列表数据,且元素个数可以增删.和ScrollView不同的是,ListView并不立即渲染 ...

  6. 【React Native开发】React Native控件之ListView组件解说以及最齐全实例(19)

    ),React Native技术交流4群(458982758).请不要反复加群!欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客左側欢迎微信扫描关注订阅号,移动技术干货,精彩文章 ...

  7. 【React Native开发】React Native控件之RefreshControl组件具体解释(21)

    ),React Native技术交流4群(458982758)种 enabled  bool   android平台适用   用来设置下拉刷新功能是否可用 progressBackgroundColo ...

  8. React Native控件之Picker

    1. import React,{Component}from 'react'; import { AppRegistry, StyleSheet, Text, View, Picker, } fro ...

  9. Robotium源码解读-native控件/webview元素的获取和操作

    目前比较有名的Uitest框架有Uiautomator/Robotium/Appium,由于一直对webview元素的获取和操作比较好奇,另外Robotium代码量也不是很大,因此打算学习一下. 一. ...

随机推荐

  1. mathType插入公式编号,及对公式编号的字体进行修改。调整公式上下间距。

    一:插入 公式编号. 1:首先设置公式格式.点击 mathtype>insert number >format 2:有简单格式和 高级格式:              https://we ...

  2. JS的二维数组

    今天,记录一下JS的二位数组,并附上例题. 一.二维数组的本质:数组中的元素又是数组. 其实,我们都见过这样的二维数组,只不过没在意罢了,例如: var arr = [[1,2,4,6],[2,4,7 ...

  3. [LeetCode] 675. Cut Off Trees for Golf Event_Hard tag: BFS

    You are asked to cut off trees in a forest for a golf event. The forest is represented as a non-nega ...

  4. 分页Bootstrap实现

    <%@ include file="/init.jsp" %> <script type="text/javascript" src=&quo ...

  5. 全文搜索引擎Xapian

    安装过程 安装xapian-core wget http://oligarchy.co.uk/xapian/1.0.13/xapian-core-1.0.13.tar.gztar zxvf xapia ...

  6. MFC用串行化实现文档存储和读取功能

    在面向对象的程序设计中,一般都是用二进制文件来保存文档资料.在VC++中控制和使用文件流的方法很多,MFC程序设计中常用的有两种方法:用CFile对象存储和读取文件:利用串行化存取文件.其中用CFil ...

  7. zw版【转发·台湾nvp系列Delphi例程】HALCON SigmaImage1

    zw版[转发·台湾nvp系列Delphi例程]HALCON SigmaImage1 procedure TForm1.Button1Click(Sender: TObject);var img, im ...

  8. Python: os.listdir()

    os.listdir(): 返回一个列表,此列表包含参数路径下的的文件名或文件夹名.这个列表以字母为顺序. eg: >>>import os >>>dirs=os. ...

  9. mysql事务(一)——redo log与undo log

    数据事务 即支持ACID四大特性. A:atomicity          原子性——事务中所有操作要么全部执行成功,要么全部执行失败,回滚到初始状态 C:consistency     一致性—— ...

  10. 查看firefox浏览器 驱动geckodriver.exe文件的版本号的方法,以及下载链接

    1-进入到geckodriver.exe文件的目录: 2-在路径栏下输入cmd: 3-命令行界面下输入:geckodriver.exe -h 可以看到文件的帮助信息,其中第一行就列出了版本号 为0.1 ...