zoukankan      html  css  js  c++  java
  • 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 )
    

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

  • 相关阅读:
    2020-03-03
    2020-03-02
    2020-03-01
    2020-02-29
    简单自我介绍
    福大软工1816 · 第六次作业
    福大软工1816 · 第五次作业
    python爬虫解决编码问题
    第四次作业-团队介绍
    福大软工1816 · 第三次作业
  • 原文地址:https://www.cnblogs.com/allenxieyusheng/p/5775361.html
Copyright © 2011-2022 走看看