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. 你知道Windows和WordPress上帝模式吗?

    一.Windows 上帝模式 这个玩意出来很久很久了,估计不用多说,知道的同学还是挺多的,不知道的也只要百度一下,你就知道了. 方法很简单,在 Windows 系统任何地方新建一个文件夹,如下命名即可 ...

  2. [vue]vue v-on事件绑定(原生修饰符+vue自带事件修饰符)

    preventDefault阻止默认行为和stopPropagation终止传递 event.preventDefault() 链接本来点了可以跳转, 如果注册preventDefault事件,则点了 ...

  3. (转)Linux Oracle服务启动&停止脚本与开机自启动

    在CentOS 6.3下安装完Oracle 10g R2,重开机之后,你会发现Oracle没有自行启动,这是正常的,因为在Linux下安装Oracle的确不会自行启动,必须要自行设定相关参数,首先先介 ...

  4. svn 常见问题记录

    One or more files are in a conflicted state 情景:A组员新增文件并提交,B组员更新出现如下图情况. 解决方案:直接拷贝到B组员工作区.

  5. ArrayList序列化

    ArrayList源代码中的 private transient E[] elementData; 声明为transient,为什么还可以序列化成功呢? ArrayList重写了 private vo ...

  6. iOS9 & iOS10 & iOS11 HTTP 不能正常使用的解决办法

    iOS9 & iOS10 & iOS11 HTTP 不能正常使用的解决办法 xcode  ios 291.4k 次阅读  ·  读完需要 8 分钟 54 今天升级Xcode 7.0 b ...

  7. FastDFS+nginx+keepalived集群搭建

    安装环境 nginx-1.6.2 libfastcommon-master.zip FastDFS_v5.05.tar.gz(http://sourceforge.net/projects/fastd ...

  8. 隐马尔科夫模型(HMM)学习笔记二

    这里接着学习笔记一中的问题2,说实话问题2中的Baum-Welch算法编程时矩阵转换有点烧脑,开始编写一直不对(编程还不熟练hh),后面在纸上仔细推了一遍,由特例慢慢改写才运行成功,所以代码里面好多处 ...

  9. Linux其他: GitBash

    git bash是Windows下的命令行工具 安装后在任何一个文件夹下右键GitBash,打开一个窗口,ssh root@xx.xxx.xxx.xx登陆到服务器,输入yes,和登陆密码可以使用敲命令 ...

  10. Linux命令: ls -F

    ls -F 列出目录中的文件 -F参数使得ls命令显示的目录文件名之后加一个斜线(“/”)字符 文件后面的星号("*")表示这是一个可执行程序