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 );