React Native Knowledge 5-touchable class components

React Native not be able to bind the click event to an element like the web, we already know that the text component has a onpress event, in order to give other components

Also tied to a point-and-click event,React native provides 3 components to do this.

1.TouchableHighlight: Highlight the touch, when the user clicks, will produce the highlight effect.

2.TouchableOpacity: Transparent touch. When the user taps, the clicked component appears transparent.

3.TouchableWithoutFeedback: No feedback touch. The user clicks without any visual effects.

Note: Only one child node is supported, and if you want to include multiple subcomponents, wrap them with a view.

One: Touchablehighlight

1: When the finger is clicked, the opacity of the view will be lowered and the corresponding color will be seen, and the implementation principle is to add a new view at the bottom . In addition,Touchablehighlight can only be nested in one layer, and cannot be nested in multiple layers.

Common Properties:

1.1: activeopacity number

Sets the opacity (value between 0-1 ) of the display when the component is touching

1.2: Onhideunderlay function method

Called when the underlying is hidden

1.3: Onshowunderlay function method

Called when the underlying display

1.4: Style

You can set the control's style presentation, which can refer to the style of the View component

1.5: Underlaycolor

The color that appears when you touch or tap a control

2: Instance Code

Import React, {Component} from ' React 'Import {appregistry, StyleSheet, Text, View, TextInput, Alert, Image, touchablehighlight} from' React-native 'class Reactnativeproject extends Component {_show (text) {alert (text); } render () {return (      <view Style={styles.container}> <touchablehighlight onpress={ This. _show.bind ( This, ' React Native ')} Underlaycolor= ' #E1F6FF ' > <text style={styles.item}>react native</text> </touchablehighl Ight> <touchablehighlight onpress={ This. _show.bind ( This, ' Click Effect ')} Underlaycolor= ' #E1F6FF ' > <text style={styles.item}> click Effects </Text> </TouchableHighlight> </View>    ); }}const Styles=stylesheet.create ({container: {flex:1, MarginTop:64}, item: {fontSize:18, MarginLeft:5, Color:' #434343 '  }}); Appregistry.registercomponent (' Reactnativeproject ', () = Reactnativeproject);

：

Two: Opaque Touch touchableopacity

1: The component encapsulates a response to a touch event, and the transparency of the component is reduced when the click is pressed. This component does not have to set the background color, so it is more convenient to use;

Common Properties:

Activeopacity number

Set the transparency of the component when the user touches it

2: Instance Code

Import React, {Component} from ' React 'Import {appregistry, StyleSheet, Text, View, TextInput, Alert, Image, Touchablehighlight, touchableopacity} from' React-native 'class Reactnativeproject extends Component {_show (text) {alert (text); } render () {return (      <view Style={styles.container}> <touchableopacity onpress={ This. _show.bind ( This, ' React Native ')} activeopacity={0.5}> <text style={styles.item}>react native</text> &LT;/TOUCHABLEOPACITY&G               T <touchableopacity onpress={ This. _show.bind ( This, ' Click Effect ')} activeopacity={0.9}> <text style={styles.item}> Click Effects </Text> </TouchableOpacity> </View>    ); }}const Styles=stylesheet.create ({container: {flex:1, MarginTop:64}, item: {fontSize:18, MarginLeft:5, Color:' #434343 '  }}); Appregistry.registercomponent (' Reactnativeproject ', () = Reactnativeproject);

：

Three: Touchablewithoutfeedback

Do not use this component unless you have a good reason to do so. All elements that respond to touchscreen operations should have a visual feedback after the touchscreen (however, this component does not have any visual feedback). This is one of the main reasons why a "web" app always appears to be "native " enough. Touchablewithoutfeedback only supports one child node, and if you want to include multiple subcomponents, wrap them with a view.

Four: Knowledge points

1:react native bind this in two ways (if bind is not used, the event will be executed as soon as it is loaded)

the first way to bind this with a parameter (using the arrow method)

<touchableopacity        onpressthis. _needhandlderargument (e,argument)}        Underlaycolor= ' #00EE76 ' > </touchableopacity >

_needhandlderargument (E, argument) {          //  handle only argument  E for bindingthis}

The second way with the parameter bind this (directly with the parameter bind)

    <touchableopacity        onpress={this-_needhandlderargument.bind (this, argument )}        Underlaycolor= ' #00EE76 ' >     </touchableopacity >

_needhandlderargument (argument) {          //   }

React Native Knowledge 5-touchable class components