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滑块组件的更多相关文章

  1. React Native 项目常用第三方组件汇总

    React Native 项目常用第三方组件汇总 https://www.jianshu.com/p/d9cd9a868764?utm_campaign=maleskine&utm_conte ...

  2. React Native知识5-Touchable类组件

    React Native 没有像web那样可以给元素绑定click事件,前面我们已经知道Text组件有onPress事件,为了给其他组件 也绑定点击事件,React Native提供了3个组件来做这件 ...

  3. React Native 之 定义的组件 (跨文件使用)

    哈哈的~~~今天介绍的是自定义组件 然后去使用这个组件,让这个组件传递这各种文件之间  哈哈  下面开始吧!!!! 我们所要创建的是一个自定义的Button,先创建一个js文件起名为MyButton, ...

  4. 8、手把手教React Native实战之ReactJS组件生命周期

    1.创建阶段 getDefaultProps:处理props的默认值 在React.createClass调用 2.实例化阶段 React.render(<HelloMessage 启动之后 g ...

  5. react native 的图表开源组件react-native-chart-android

    react-native-chart-android是一个图表开源组件,使用方法可以去这里 由于需要在数据上加上触摸事件,而github上没有说明看源码找了半天才找到下面的解决方法,特此记录一下: 在 ...

  6. [RN] React Native 删除第三方开源组件依赖包 后 还要做的 (以 删除 react-native-video为例)

    近期测试使用了下  react-native-video 使用一直不成功,后来想着删除掉, 使用命令: npm uninstall react-native-video 重新编译后,还是一直报错 后来 ...

  7. React Native组件介绍

    1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...

  8. React Native之Image组件

    同 HTML 的 img 元素一样,React Native 提供的 Image 组件可以用来显示各种途径的图片,比如网络图片.本地图片.照相机图片等. 虽然效果是一样的.然而用法还是有区别的. 1. ...

  9. React Native常用第三方组件汇总--史上最全 之一

    React Native 项目常用第三方组件汇总: react-native-animatable 动画 react-native-carousel 轮播 react-native-countdown ...

随机推荐

  1. hiredis(Synchronous API)

    hiredis是一个小型的client端的c库.它只增加了最小对协议的支持,同时它用一个高级别的printf-alike API为了绑定各种redis命令.除了支持发送和接收命令,它还支持对流的解析. ...

  2. POJ3096:Surprising Strings(map)

    http://poj.org/problem?id=3096 for循环真是奇妙! #include <string.h> #include <stdio.h> #includ ...

  3. [LeetCode] All questions numbers conclusion 所有题目题号

    Note: 后面数字n表明刷的第n + 1遍, 如果题目有**, 表明有待总结 Conclusion questions: [LeetCode] questions conclustion_BFS, ...

  4. 用户用户组管理:用户管理命令-passwd

    passwd直接回车就是给root设密码.或加root. 普通用户只能改自己的密码.改时直接敲passwd,回车.否则报错. 因为只有root可以在passwd后加用户名.其实最常见的就是不加选项. ...

  5. python爬虫对于gb2312

    对于刚刚接触python爬虫的人,常常会碰到一个比较烦的问题, 如果网页是GB2312编码格式,我们直接decode(’GB2312‘)一般python都会报错: GB2312不能编码该页面. 这就比 ...

  6. css3实现头像旋转360度

    css样式: .div a img{ width: 88px; height: 88px; border-radius: 88px; transition: all 1.2s ease-out 0s; ...

  7. 调用spark API,监控任务的进度

    我们现在需要监控datapre0这个任务每一次执行的进度,操作如下: 1. 如图所示,打开spark管理页面,找到对应的任务,点击任务名datapre0 2. 进去之后,获得对应IP和端口  3. 访 ...

  8. linux常用命令:find 命令之 exec

    find是我们很常用的一个Linux命令,但是我们一般查找出来的并不仅仅是看看而已,还会有进一步的操作,这个时候exec的作用就显现出来了. exec解释: -exec  参数后面跟的是command ...

  9. python webdriver 显示等待判断元素是可以被点击的,但是执行脚本时,却提示元素不能点击的解决办法?

    我之前运行没问题的环境是firefox版本50,对应的驱动是没有问题的,现在firefox自动升级到了60,驱动没有变,我试着把浏览器装回了50,再试就好了, 所以应该是浏览器跟驱动geckodriv ...

  10. 硬件中断和DPC一直占40-52%左右 解决方法

    硬件中断和DPC一直占40-52%左右,突然感觉电脑变慢 重启后竟然启动不了了,冷却一段时间后才能进去,温度检测cpu,硬盘都超标了! 用Process Explorer检测硬件中断和DPC 占cpu ...