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:
parent
dc207ec40e
commit
ec50aa6d33
|
@ -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',
|
||||
|
|
Loading…
Reference in New Issue