React-native Seven: Slider

A component used to select a value from a range of values. First, the attribute

Name	Type	Description
slider Max. The default is 1.
Value	Number	The value selected by the slider bar. This value should be between the minimum and maximum values, and their default values are 0 and 1, respectively. The default value is 0.

Second, examples index.andorid.js File

' Use strict '; var React = require (' React '); var reactnative = require (' react-native '); var {appregistry, StyleSheet, View , Text, Slider,} = Reactnative;var Sliderexample = React.createclass ({getdefaultprops:function () {return {VA  Lue:0,};  }, Getinitialstate:function () {return {value:0,}; }, Render:function () {return (<View> <text style={styles.text}> {this.state.value && +this.state.value.tofixed (3)} </Text> <slider {... this.props} ONVALUEC  hange={(value) = This.setstate ({value:value})}/> </View>);  }), var slidingcompleteexample = React.createclass ({getinitialstate:function () {return {slidecompletionvalue:  0, slidecompletioncount:0,}; }, Render:function () {return (<View> <sliderexample {... this.props} Onslidin gcomplete={(value) = This.setstate ({slideCompletionvalue:value, SlideCompletionCount:this.state.slideCompletionCount + 1})}/> <text&gt          ; Completions: {This.state.slideCompletionCount} Value: {this.state.slideCompletionValue} </Text> </vie  w>); }}); var awesomeproject = React.createclass ({render:function () {return <View> <sliderexample/&        Gt <sliderexample value={0.5}/> <sliderexample minimumvalue={-1} maximumvalue={2}/> <SliderExam  Ple step={0.25}/> <slidingcompleteexample/> </View>); }}); var styles = Stylesheet.create ({slider:{height:10, Width:10,}, text:{fontsize:14, textAlign: ' CE Nter ', FontWeight: ' $ ', Margin:10,},}); Appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);

Operation Result:
Tip 1: After writing the completion code, Reload JS, the program operation error is as follows:
processing: View your current version of reat-native through React-native--version. If the slider control is not supported in this version, consult the "React-native Learning Ten: react-native Upgrade" upgrade to the corresponding version. and reinstall app Reload;

React-native Seven: Slider