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

import React,{Component}from 'react';
import {
AppRegistry, 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('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. SSH进行登录远程主机,实验室网站,项目

    1:下载putty,双击putty.exe     http://www.putty.be/latest.html 输入要连接的ip和端口号,直接打开open.或者在saved Sessions框里面 ...

  2. Chrome插件汇总

    Chrome浏览器可以增加很多插件,帮助我们更方便地使用. 1   重新定位新标签页 名字:Infinity.crx 官网:http://www.infinitynewtab.com/ 效果图如下: ...

  3. Selenium+Java元素定位之一

    通过id进行定位 driver.findElement(By.id("kw")).sendKeys("博客园"); 通过name进行定位 driver.find ...

  4. sql2008评估板过期

    1.查看sql2008到期时间,打开数据库---帮助---关于,具体可查看试用期还有多长时间 2.重新激活 : ① 打开注册表后,找到并把 HKEY_LOCAL_MACHINE\SOFTWARE\Mi ...

  5. JS参差不齐的数组

    <html><head> <title>参差不齐的数组</title> <meta charset="utf-8"> & ...

  6. linux eaccelerator

    wget https://github.com/eaccelerator/eaccelerator/tarball/master tar -jxvf eaccelerator-0.9.6.1.tar. ...

  7. 使用Linux工作之Fedora KDE

    小明拿着在Windows下不断蓝屏的T440和公司建议不使用云笔记的规定,心下想着,是时候回归linux了... 一.系统的获取与启动盘的制作 fedora20 KDE版 liveusb-creato ...

  8. nginx 总结

    本文转自:http://freeloda.blog.51cto.com/2033581/1288553 ,感谢大神的辛勤付出! 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之 ...

  9. python3.4学习笔记(五) IDLE显示行号问题,插件安装和其他开发工具介绍

    python3.4学习笔记(五) IDLE显示行号问题,插件安装和其他开发工具介绍 IDLE默认不能显示行号,使用ALT+G 跳到对应行号,在右下角有显示光标所在行.列.pycharm免费社区版.Su ...

  10. KEIL中常见问题

    1:..\Obj\phone.axf: Error: L6218E: Undefined symbol err (referred from gprs.o). 函数中定义的外部变量,找不到其源 即在g ...