mirror of
https://github.com/status-im/react-native.git
synced 2025-01-16 04:24:15 +00:00
Docs: Add example to CheckBox documentation
Summary: I find it easier to understand the behavior of a component when there is a simple example showing its usage. I recently used the CheckBox component and noticed that it doesn't have a code example. This PR adds an example to the CheckBox documentation. N/A [DOCS][ENHANCEMENT][CheckBox] - Added example to documentation Closes https://github.com/facebook/react-native/pull/16489 Differential Revision: D6260998 Pulled By: hramos fbshipit-source-id: 7c6f9677741a4c0483eb1f5405cd05f8bbdd83aa
This commit is contained in:
parent
45ed142596
commit
e906525e84
@ -34,6 +34,50 @@ type DefaultProps = {
|
|||||||
* If the `value` prop is not updated, the component will continue to render
|
* If the `value` prop is not updated, the component will continue to render
|
||||||
* the supplied `value` prop instead of the expected result of any user actions.
|
* the supplied `value` prop instead of the expected result of any user actions.
|
||||||
*
|
*
|
||||||
|
* ```
|
||||||
|
* import React from 'react';
|
||||||
|
* import { AppRegistry, StyleSheet, Text, View, CheckBox } from 'react-native';
|
||||||
|
*
|
||||||
|
* export default class App extends React.Component {
|
||||||
|
* constructor(props) {
|
||||||
|
* super(props);
|
||||||
|
* this.state = {
|
||||||
|
* checked: false
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* toggle() {
|
||||||
|
* this.setState(({checked}) => {
|
||||||
|
* return {
|
||||||
|
* checked: !checked
|
||||||
|
* };
|
||||||
|
* });
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* render() {
|
||||||
|
* const {checked} = this.state;
|
||||||
|
* return (
|
||||||
|
* <View style={styles.container}>
|
||||||
|
* <Text>Checked</Text>
|
||||||
|
* <CheckBox value={checked} onChange={this.toggle.bind(this)} />
|
||||||
|
* </View>
|
||||||
|
* );
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* const styles = StyleSheet.create({
|
||||||
|
* container: {
|
||||||
|
* flex: 1,
|
||||||
|
* flexDirection: 'row',
|
||||||
|
* alignItems: 'center',
|
||||||
|
* justifyContent: 'center',
|
||||||
|
* },
|
||||||
|
* });
|
||||||
|
*
|
||||||
|
* // skip this line if using Create React Native App
|
||||||
|
* AppRegistry.registerComponent('App', () => App);
|
||||||
|
* ```
|
||||||
|
*
|
||||||
* @keyword checkbox
|
* @keyword checkbox
|
||||||
* @keyword toggle
|
* @keyword toggle
|
||||||
*/
|
*/
|
||||||
|
Loading…
x
Reference in New Issue
Block a user