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 ...
随机推荐
- Goroutines vs Threads
http://tleyden.github.io/blog/2014/10/30/goroutines-vs-threads/ Here are some of the advantages of G ...
- mathType插入公式编号,及对公式编号的字体进行修改。调整公式上下间距。
一:插入 公式编号. 1:首先设置公式格式.点击 mathtype>insert number >format 2:有简单格式和 高级格式: https://we ...
- 学习Spark2.0中的Structured Streaming(一)
转载自:http://lxw1234.com/archives/2016/10/772.htm Spark2.0新增了Structured Streaming,它是基于SparkSQL构建的可扩展和容 ...
- R之ddlpy函数学习[转载]
转自:https://www.cnblogs.com/aloiswei/p/6032513.html 1.函数 ddply(.data, .variables, .fun = NULL, ..., . ...
- ACM 未解决的问题
还没有搞定的ACM问题列表. google code jam Round1A Round1B Round1C Round2 Round3 Onsite Finals 百度之星 一.资格赛题目: dis ...
- 总结C#获取当前路径的7种方法
C#获取当前路径的方法如下: 1. System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. 2. ...
- Perl的debug小技巧
进入Perl的调试环境的命令: Perl -d perl_file 设置断点:b + perl代码中的行号. 执行到断点:c 表示continue until breakpoint. 执行下一条 ...
- 《算法C语言实现》————三道题目
1.对于N = 10,100和1000,记录你的运行环境中分别运行一下程序所花费的时间.(用python) import datetime global a a = 0 def time_1(s): ...
- Python 为什么sys.stdout.write 输出时后面总跟一个数字
sys.stdout 是标准输出文件.write就是往这个文件写数据. 合起来就是打印数据到标准输出 因为-在交互模式下会输出函数返回值,而write会返回输出的字符数量.在命令行里不会显示
- Linux基础命令---e2image
e2image e2Image程序将位于设备上的ext2.ext3或ext4文件系统元数据保存到由图像文件指定的文件中.通过对这些程序使用-i选项,image文件可以由dupe2fs和调试器来检查.这 ...