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 )

  备注:滑动后会用函数传递参数值

posted @ 2016-08-16 10:22  谢玉胜  阅读(1223)  评论(0编辑  收藏  举报
@allenXieyusheng