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