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. 通过反射,获取linkedHashMap的最后一个键值对。对map按照值进行排序。

    1:通过反射,获取linkedHashMap的最后一个键值对. Map<Integer, Integer> map = new LinkedHashMap<>(); Field ...

  2. python对象反射和函数反射

    python的对象反射功能,经常在编程时使用.相比较其它的编程语言使用非常方便.反射就是用字符串来操作对象或者类,模块中的成员. 一.对象的反射 反射功能的实现,由这4个内置函数来实现(hasattr ...

  3. Sequence(priority_queue)

    这题很智慧. VJ上4000多ms #include<cstdio> #include<algorithm> #include<queue> #include &l ...

  4. AngularJS 表达式 对象和数组

    AngularJS 使用 表达式 把数据绑定到 HTML. AngularJS 表达式 AngularJS 表达式写在双大括号内:{{ expression }}. AngularJS 表达式把数据绑 ...

  5. jmeter bean shell断言加密的响应信息(加密接口测试二)

    断言加密的响应信息 1.在http请求-->添加-->断言-->bean shell 断言 import com.changfu.EncryptAndDecryptInterface ...

  6. .NET MVC model数据验证

    MVC提供了很方便的数据验证,只需要在model里加入相关的正则等,那么就会在前台里生成相关的验证脚本.需要引用两个js文件: jquery.validate.min.js jquery.valida ...

  7. POI导出EXCEL经典实现(转)

    http://www.cnblogs.com/xwdreamer/archive/2011/07/20/2296975.html 1.Apache POI简介 Apache POI是Apache软件基 ...

  8. OS X 下动态库的引用

    foo.c #include <stdio.h> void foo(void) { printf("foo.\n"); } main.c #include <st ...

  9. 数据仓库基础(十三)Informatica workflow

    本文转载自:http://www.cnblogs.com/evencao/p/3154715.html 看了几天的Informatica ,关于infor的资料也比较少,主要的<商业智能深入浅出 ...

  10. 中国用户通过rchange用银联充值到PerfectMoney再给BTC-E充值进行搬砖的方法

    最近迷上了比特币这个疯狂的东西,相信很多技术人员都感兴趣. 比特币.莱特币钱包下载和把数据迁移到C盘以外其他盘的方法. 莱特币和山寨币的原理跟比特币基本上一样,可以参考这个方法进行,莱特币的钱包数据迁 ...