React Native的SliderIOS滑块组件

import React,{Component}from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
SliderIOS,
} from 'react-native';
class SliderIOSDemo extends Component {
constructor(props){
super(props);
this.state={
value:0,
};
}
render() {
return (
<View>
<Text style={{marginLeft:10}}>默认的SliderIOS</Text>
<SliderIOS style={{margin:10}}
onSlidingComplete={()=>console.log('当前的值为'+this.state.value)}
onValueChange={(value)=>this.setState({value:value})}
/>
<Text style={{marginLeft:10}}>设置SliderIOS无法滑动</Text>
<SliderIOS
style={{margin:10}}
disabled={true}
/>
<Text style={{marginLeft:10}}>定制SliderIOS</Text>
<SliderIOS style={{margin:10}}
value={0.4}
onSlidingComplete={()=>console.log('当前的值为'+this.state.value)}
onValueChange={(value)=>this.setState({value:value})}
/>
</View>
);
}
}
const styles = StyleSheet.create({
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 20,
},
});
AppRegistry.registerComponent('Allen', () => SliderIOSDemo )
备注:滑动后会用函数传递参数值
React Native的SliderIOS滑块组件的更多相关文章
- React Native 项目常用第三方组件汇总
React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...
- React Native知识5-Touchable类组件
React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...
- React Native 之 定义的组件 (跨文件使用)
哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间 哈哈 下面开始吧!!!! 我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, ...
- 8、手把手教React Native实战之ReactJS组件生命周期
1.创建阶段 getDefaultProps:处理props的默认值 在React.createClass调用 2.实例化阶段 React.render(<HelloMessage 启动之后 g ...
- react native 的图表开源组件react-native-chart-android
react-native-chart-android是一个图表开源组件,使用方法可以去这里 由于需要在数据上加上触摸事件,而github上没有说明看源码找了半天才找到下面的解决方法,特此记录一下: 在 ...
- [RN] React Native 删除第三方开源组件依赖包 后 还要做的 (以 删除 react-native-video为例)
近期测试使用了下 react-native-video 使用一直不成功,后来想着删除掉, 使用命令: npm uninstall react-native-video 重新编译后,还是一直报错 后来 ...
- React Native组件介绍
1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...
- React Native之Image组件
同 HTML 的 img 元素一样,React Native 提供的 Image 组件可以用来显示各种途径的图片,比如网络图片.本地图片.照相机图片等. 虽然效果是一样的.然而用法还是有区别的. 1. ...
- React Native常用第三方组件汇总--史上最全 之一
React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...
随机推荐
- ElasticSearch排序Java api简单Demo
代码: String time1 = ConstValue.GetCurrentDate(); SortBuilder sortBuilder = SortBuilders.fieldSort(&qu ...
- http 之 HTTP_X_FORWARDED_FOR
原文 http://www.imququ.com/post/x-forwarded-for-header-in-http.html 主题 HTTP Nginx 我一直认为,对于从事 Web 前端开 ...
- 20155333 2016-2017-2 《Java程序设计》第九周学习总结
20155333 2016-2017-2 <Java程序设计>第九周学习总结 教材学习内容总结 JDBC(Java DataBase Connectivity) 驱动的四种类型 JDBC- ...
- wkhtmtopdf--高分辨率HTML转PDF(二)
命令行 wkhtmtopdf有一些很实用的命令,平时如果不用代码,可以直接使用命令行来把你喜欢的任意网页转换为PDF, 命令行参考网址:http://madalgo.au.dk/~jakobt/wkh ...
- EF Code First学习笔记 初识Code First(转)
Code First是Entity Framework提供的一种新的编程模型.通过Code First我们可以在还没有建立数据库的情况下就开始编码,然后通过代码来生成数据库. 下面通过一个简单的示例来 ...
- python 读不同编码的文本,传递一个可选的encoding 参数给open() 函数
文件的读写操作默认使用系统编码,可以通过调用sys.getdefaultencoding() 来得到.在大多数机器上面都是utf-8 编码.如果你已经知道你要读写的文本是其他编码方式,那么可以通过传递 ...
- Python: Flask框架简单介绍
接触Python之后我第一次听说Flask,我就根据自己搜罗的知识尽可能简洁的说出来.如果不准确的地方还请指正,谢谢. Flask是什么? Flask是基于Python编写的微 ...
- Python: str.split()和re.split()的区别
str.split() 单一分隔符,使用str.split()即可 str.split不支持正则及多个切割符号,不感知空格的数量 re.split() 多个分隔符,复杂的分隔情况,使用re.split ...
- Java设计模式应用——组合模式
组合模式实际上是一种树形数据结构.以windows目录系统举例,怎么样用java语言描述一个文件夹? 定义一个文件夹类,文件夹类中包含若干个子文件类和若干个文件类. 进一步抽象,把文件夹和文件都看做节 ...
- python webdriver 登陆163邮箱给QQ邮箱发送一个邮件,显示等待
#encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...