Docs: Improve documentation of Slider (add example)

Summary:
It would be great to have examples in the documentation of all components. I have created a PR to add an example for `CheckBox`, and now I am adding an example for the `Slider` component.

The PR changes documentation. No further test is required.

[DOCS][ENHANCEMENT][Slider] - Added example to documentation
Closes https://github.com/facebook/react-native/pull/16588

Differential Revision: D6197329

Pulled By: hramos

fbshipit-source-id: 91d1b20fc2d4bae15f9706ac4c155411d91af290
This commit is contained in:
Adriano Melo 2017-10-31 09:21:23 -07:00 committed by Facebook Github Bot
parent dc207ec40e
commit ec50aa6d33
1 changed files with 57 additions and 0 deletions

View File

@ -28,6 +28,63 @@ type Event = Object;
/**
* A component used to select a single value from a range of values.
*
* ### Usage
*
* The example below shows how to use `Slider` to change
* a value used by `Text`. The value is stored using
* the state of the root component (`App`). The same component
* subscribes to the `onValueChange` of `Slider` and changes
* the value using `setState`.
*
*```
* import React from 'react';
* import { StyleSheet, Text, View, Slider } from 'react-native';
*
* export default class App extends React.Component {
* constructor(props) {
* super(props);
* this.state = {
* value: 50
* }
* }
*
* change(value) {
* this.setState(() => {
* return {
* value: parseFloat(value)
* };
* });
* }
*
* render() {
* const {value} = this.state;
* return (
* <View style={styles.container}>
* <Text style={styles.text}>{String(value)}</Text>
* <Slider
* step={1}
* maximumValue={100}
* onValueChange={this.change.bind(this)}
* value={value} />
* </View>
* );
* }
* }
*
* const styles = StyleSheet.create({
* container: {
* flex: 1,
* flexDirection: 'column',
* justifyContent: 'center'
* },
* text: {
* fontSize: 50,
* textAlign: 'center'
* }
* });
*```
*
*/
var Slider = createReactClass({
displayName: 'Slider',