React Native的TouchableOpacity组件

TouchableOpacity 透明触摸
本组件用于封装视图，使其能够正确响应触摸操做。当按下的时候，封装的视图的不透明度会下降。react

不透明度的变化是经过把子元素封装在一个Animated.View中来实现的，这个动画视图会被添加到视图层级中，少数状况下有可能会影响到布局。（译注：此组件与TouchableHighlight的区别在于并无额外的颜色变化，更适于通常场景。）
使用以前，与Text，Image组件同样，都须要引入
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, TextInput, TouchableOpacity } from 'react-native';
引入后，在文件中使用是这样的
activeOpacity={0.5} 是它点击时的颜色变化，0.8/0.9基本上看不出来，通常使用0.5这个值git

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
  TouchableOpacity
} from 'react-native';
var Dimensions = require ('Dimensions') ;
var {width,height} = Dimensions.get('window');
class Home extends Component {
  constructor(props) {
    super(props)
    this.state = { title:'默认文字' }
  }
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity activeOpacity={0.5}
           onPress={()=>this.textPress('点击')}
           onPressIn={()=>this.textPress('按下时')}
           onPressOut={()=>this.textPress('按后')}
           onLongPress={()=>this.textPress('长按时...')}
         
           style={styles.textStyle}>
          <Text>我是文字。点击下看看吧</Text>
        </TouchableOpacity>
        <Text>{this.state.title}</Text>

      </View>
    );
  }

  textPress(value){
    // console.warn('点击成功')
    this.setState({
      title:value
    })
  }
}

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

module.exports = Home;

onPress ：点击事件github

onPressIn: 是按下时的事件web

onPressOut:抬起事件react-native

onLongPress:长按事件
具体想要什么事件，均可以本身去定义！
手机在操做过程当中不太好截图，因此截了一张图：svg

在使用react native中，还须要了解下生命周期问题，接下来将学习这个，一块儿加油吧！布局

本文同步分享在博客“zoepriselife316”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。学习