Touchable示例

例：

import React from 'react';import { AppRegistry, Text ,TouchableHighlight,ToastAndroid,StyleSheet,View,TouchableNativeFeedback,TouchableOpacity,} from 'react-native';//知识点：1 TouchableHighlight 用来设置组件的透明度   注意：TouchableHighlight只支持一个子节点，如果你希望包含多个子组件，用一个View来包装它们 //      2 TouchableNativeFeedback  原生触摸操作反馈的背景 触发组件时显示波纹 有三个方法 //           1） TouchableNativeFeedback.SelectableBackground() - 会创建一个对象，表示安卓主题默认的对于被选中对象的背景 //           2)  ouchableNativeFeedback.SelectableBackgroundBorderless() - 会创建一个对象，表示安卓主题默认的对于被选中的无边框对象的背景。 //           3) ouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象，当按钮被按下时产生一个涟漪状的背景，你可以通过color参数来指定颜色，如果参数borderless是true，那么涟漪还会渲染到视图的范围之外 // 3 TouchableOpacity  用来设置组件的透明度  此组件与TouchableHighlight的区别在于并没有额外的颜色变化，更适于一般场景class MyFirstProject extends React.Component {  _onPressButton() {    ToastAndroid.show("You tapped the button!",ToastAndroid.SHORT);  }  _onShow(){  ToastAndroid.show("显示",ToastAndroid.SHORT);  }  _onHide(){  ToastAndroid.show("隐藏",ToastAndroid.SHORT);  }  render() {    return (      <View>         <TouchableHighlight              style = {styles.container }             //触摸时组件显示的透明度  值0～1              activeOpacity = {1}              //有触摸操作时显示出来的底层的颜色              underlayColor  = 'red'              onPress={this._onPressButton}              //当底层的颜色被显示的时候调用              onShowUnderlay = {this._onShow}              //当底层的颜色被隐藏的时候调用              onHideUnderlay = {this._onHide}>                   <Text style = {styles.txtStyle }>TouchableHighlight（透明度）</Text>         </TouchableHighlight>         <TouchableNativeFeedback              style = {{ alignSelf : 'center',}}              onPress={this._onPressButton}              background={TouchableNativeFeedback.Ripple('blue',true)}>                   <View style={styles.container}>                        <Text style={styles.txtStyle}>TouchableNativeFeedback(触摸操作反馈的背景)</Text>                        <View></View>                   </View>         </TouchableNativeFeedback>        <TouchableOpacity               style = {styles.container }              activeOpacity = {0.6}              onPress={this._onPressButton}>              <Text style={styles.txtStyle}>TouchableOpacity(触摸操作反馈的背景)</Text>        </TouchableOpacity>        <View></View>      </View>          );  }}const styles = StyleSheet.create({container : {//子元素是应该沿着水平轴(row)方向排列，还是沿着竖直轴(column)方向排列呢？默认值是竖直轴(column)方向    flexDirection :'column',        marginTop: 30,        height : 100,        width : 500,        //决定其子元素沿着主轴的排列方式 可选项有：flex-start、center、flex-end、space-around以及space-between        justifyContent : 'center',         //决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式 可选项有：flex-start、center、flex-end以及stretch        alignItems : 'center',        //决定了元素在父元素的次轴方向的排列方式（此样式设置在子元素上），其值会覆盖父元素的alignItems的值        alignSelf : 'center',        backgroundColor : 'chartreuse',        //画圆弧        borderRadius: 10,},    txtStyle :{        fontSize : 25,    },});AppRegistry.registerComponent('MyFirstProject', () => MyFirstProject );

资料：touchable官网

效果图：