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 ...
随机推荐
- 微信小程序性能测试之jmeter踩坑秘籍(前言)
最近要做个微信小程序的性能压测,虽然之前只做过web端的,但想一想都是压后端的接口,所以果断答应了下来,之前对jmeter都是小打小闹,所以趁着这次机会好好摆弄摆弄. ---------------- ...
- PAT 1026 Table Tennis[比较难]
1026 Table Tennis (30)(30 分) A table tennis club has N tables available to the public. The tables ar ...
- CentOS6.5安装RHadoop
1.首先安装依赖包(各个节点都要安装) [root@Hadoop-NN-01 ~]$ yum install gcc-gfortran #否则报”configure: error: No F77 co ...
- java判断包含contains方法的使用
java中contains方法是判断是否存在包含关系,比如说a =[1,2,3,4], b=1那么a就包含b contains返回的是布尔类型true 和false,包含的话就返回true,不包含的话 ...
- 【Java】系统漏洞:关于用户登录后操作的注意事项
项目背景: SpringMVC + Mybatis + MySql数据库(javaWeb项目开发) 相关模块:登录,个人详细信息修改,订单详情查询 相关漏洞介绍: 1.登录的验证码:登录的验证码一定 ...
- C#+Aspose.Cells 导出Excel及设置样式 (Webform/Winform)
在项目中用到,特此记录下来,Aspose.Cells 不依赖机器装没有装EXCEL都可以导出,很方便.具体可以参考其他 http://www.aspose.com/docs/display/cells ...
- .apk等常用文件下载出现如果应下载文件,请添加 iis MIME 映射。
在下载.apk文件时出现错误. HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加 MIME 映射. ...
- 修改form 的字段背景颜色及字体颜色
1.通过个性化实现 2. 修改form 代码 有一张工资单,当某个员工的工资超过5000时,用户需要系统能用红色来指示员工的姓名和工资. 实现方法: 我们新做一张form,按常规建好block和ite ...
- <A Decomposable Attention Model for Natural Language Inference>(自然语言推理)
http://www.xue63.com/toutiaojy/20180327G0DXP000.html 本文提出一种简单的自然语言推理任务下的神经网络结构,利用注意力机制(Attention Mec ...
- 浅谈css中渐变衔接
无论transition还是keyframes,如何让变化更自然,这是前端应该考虑的问题. 这里,我简单总结下自己的方法. 以实践为例子. 1.图像渐变 @keyframes looppic{ fro ...