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