React Native交互组件之Touchable

React Native交互组件之Touchable：只要在组件外面包一个Touchable组件就可以实现点击交互。

TouchableHighlight:高亮触摸

当点击时，组件的透明度会改变，可以看到点击效果，TouchableHighlight只可以进行嵌套一层。其常用属性如下：

　　activeOpacity　　　　 点击时，组件的透明度。0-1

　　onHideUnderlay 　　 当底层被隐藏时调用

　　onShowUnderlay　　　　当底层显示时调用

　　style 风格

　　underlayColor　　当点击组件时显示的颜色

TouchableOpacity:不透明触摸

　　activeOpacity 点击时，组件的透明度。0-1

常用的点击事件如下：

　　

/**
* Sample React Native App
* https://github.com/facebook/react-native * 周少停 Touchable交互
* 2016-09-19
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TouchableOpacity,
AlertIOS
} from 'react-native';

class Project extends Component {
render() {
return (
<View style={styles.container}>
<TouchableOpacity activeOpacity={0.5}
//           onPress = {()=>this.activeEvent('点击')}
//           onPressIn = {()=>this.activeEvent('按下')}
//           onPressOut = {()=>this.activeEvent('抬起')}
onLongPress = {()=>this.activeEvent("长按")}
>
<View style={styles.innerViewStyle}>
<Text>我是可以点击的一个Text文本</Text>
</View>
</TouchableOpacity>
</View>
);
}
activeEvent(event){
AlertIOS.alert(event);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
innerViewStyle: {
backgroundColor: 'red',
}
});

AppRegistry.registerComponent('Project', () => Project);

　　获取屏幕属性：

/**
* Sample React Native App
* https://github.com/facebook/react-native * 周少停 2016-09-12
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
//引入
var Dimensions = require('Dimensions')
class Project extends Component {
render() {
return (
<View style={styles.container}>
<Text>当前屏幕的宽度:{Dimensions.get('window').width}</Text>
<Text>当前屏幕的高度:{Dimensions.get('window').height}</Text>
<Text>当前屏幕的分辨率:{Dimensions.get('window').scale}</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1, //充满全屏
justifyContent: 'center',//主轴对齐方式
alignItems: 'center',//侧轴对齐方式
backgroundColor: '#F5FCFF', //背景色
}
});

AppRegistry.registerComponent('Project', () => Project);

　　完整源码下载：https://github.com/pheromone/React-Native-1