From the zero-learning react native 09 touchable components

The available touch components are:
TouchableHighlight,TouchableNativeFeedback,TouchableOpacity,TouchableWithoutFeedback
1. Touchablewithoutfeedback, when the user touch no feedback any touch effect, experience is very bad, basic rarely used.
2. Touchablenativefeedback is a special component of the Android operating system, using the corresponding state of the native control to show, for example, more than 5.0 ripple effect.
3. Touchablehighlight and Touchableopacity both produce visual effects, of which touchableopacity is the most used among the four.

Touchablehighlight

When a component becomes a subassembly of the Touchablehighlight component, the component touches a darkening effect by allowing the next layer of color to be obscured by the quilt component, which darkens or colors the subassembly, and the default pass-through is black, You can specify the color of the pass through Underlaycolor. The Activeopacity property can specify transparency. The default is 0.8.
Touchablehighlight also has a bug that looks at the following code:

ImportReact, {Component} from' react ';Import{appregistry, StyleSheet, View, Touchablehighlight, Touchableopacity, touchablenativefeedback} from' react-native '; class awesomeproject extends Component {Render () {return(//Root View<view Style={{flex:1, BackgroundColor:' White '}}> <touchablehighlightonpress={ This.buttonpressed}> <view Style={{width: -, Height: -, BackgroundColor:' Grey '}}/> </TouchableHighlight> </View>); } buttonpressed () {Console.log ("Press"); }}

Press the previous effect:

Press the effect:

You can see that the right side should not darken, this can be added to the right of some other components need to display, or for the entire background to add a picture can be resolved. Of course, we recommend that you use Touchableopacity.

Touchableopacity

When a component becomes a subcomponent of the touchableopacity component, the component becomes translucent when touched, and the transparency is controlled by activeopacity, which defaults to 0.2.
Modify the above code:

  ...    render() {        return (            //根View            <View style={{flex:1,backgroundColor:‘white‘}}>               <TouchableOpacity onPress={this.buttonPressed}>                   <View style={{width:120,height:70,backgroundColor:‘grey‘}}/>                </TouchableOpacity>            </View>        );    }  ...

Touchableopacity Press the effect:

Callback Functions and other properties

1. Onpress Click event callback function
2. Onlongpress Long Press Events
3. Delaylongpress setting the length of the event is the number of millimeters by default is 500ms
4. Delaypressout set how many milliseconds to leave the screen after the Onpressout event is activated, the default is 0
5. Delaypressin Set finger touch screen how many millimeters thick, Onpressin event is activated, default is 0

React native 09 touchable components from the zero learning