mirror of
https://github.com/status-im/react-native.git
synced 2025-02-26 08:05:34 +00:00
Add Example for TouchableOpacity.js
Summary: <!-- Thank you for sending the PR! We appreciate you spending the time to work on these changes. Help us understand your motivation by explaining why you decided to make this change. You can learn more about contributing to React Native here: http://facebook.github.io/react-native/docs/contributing.html Happy contributing! --> Adding example with [react-native-web-player](https://github.com/dabbott/react-native-web-player) Screenshot on http://localhost:8079/react-native/docs/touchableopacity.html  Closes https://github.com/facebook/react-native/pull/15911 Differential Revision: D5817180 Pulled By: TheSavior fbshipit-source-id: 6399a53dabf8e3f0cf680aeb41d8afbaa2ce11e8
This commit is contained in:
parent
cbb0ccb185
commit
fa1b533c56
@ -51,6 +51,72 @@ var PRESS_RETENTION_OFFSET = {top: 20, left: 20, right: 20, bottom: 30};
|
||||
* );
|
||||
* },
|
||||
* ```
|
||||
* ### Example
|
||||
*
|
||||
* ```ReactNativeWebPlayer
|
||||
* import React, { Component } from 'react'
|
||||
* import {
|
||||
* AppRegistry,
|
||||
* StyleSheet,
|
||||
* TouchableOpacity,
|
||||
* Text,
|
||||
* View,
|
||||
* } from 'react-native'
|
||||
*
|
||||
* class App extends Component {
|
||||
* constructor(props) {
|
||||
* super(props)
|
||||
* this.state = { count: 0 }
|
||||
* }
|
||||
*
|
||||
* onPress = () => {
|
||||
* this.setState({
|
||||
* count: this.state.count+1
|
||||
* })
|
||||
* }
|
||||
*
|
||||
* render() {
|
||||
* return (
|
||||
* <View style={styles.container}>
|
||||
* <TouchableOpacity
|
||||
* style={styles.button}
|
||||
* onPress={this.onPress}
|
||||
* >
|
||||
* <Text> Touch Here </Text>
|
||||
* </TouchableOpacity>
|
||||
* <View style={[styles.countContainer]}>
|
||||
* <Text style={[styles.countText]}>
|
||||
* { this.state.count !== 0 ? this.state.count: null}
|
||||
* </Text>
|
||||
* </View>
|
||||
* </View>
|
||||
* )
|
||||
* }
|
||||
* }
|
||||
*
|
||||
* const styles = StyleSheet.create({
|
||||
* container: {
|
||||
* flex: 1,
|
||||
* justifyContent: 'center',
|
||||
* paddingHorizontal: 10
|
||||
* },
|
||||
* button: {
|
||||
* alignItems: 'center',
|
||||
* backgroundColor: '#DDDDDD',
|
||||
* padding: 10
|
||||
* },
|
||||
* countContainer: {
|
||||
* alignItems: 'center',
|
||||
* padding: 10
|
||||
* },
|
||||
* countText: {
|
||||
* color: '#FF00FF'
|
||||
* }
|
||||
* })
|
||||
*
|
||||
* AppRegistry.registerComponent('App', () => App)
|
||||
* ```
|
||||
*
|
||||
*/
|
||||
var TouchableOpacity = createReactClass({
|
||||
displayName: 'TouchableOpacity',
|
||||
|
Loading…
x
Reference in New Issue
Block a user