React Native控件之Touchable系列组件详解18(5/7)

本篇文章主要介绍了"React Native控件之Touchable系列组件详解18"，主要涉及到方面的内容，对于移动开发感兴趣的同学可以参考一下： 转载请标明出处：http://blog.csdn.net/developer_jiangqq/article/details/50630984本文出自:【江清清...

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

class TouchableDemo extends Component {
  render() {
    return (
      
        
           TouchableOpacity实例
        
        
           点击改变透明度
        
      
    );
  }
}
const styles =StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

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

           4.4.运行效果截图:

               4.5.实例演示onPress,onPressIn,onPressOut,onLongPress方法代码如下:

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

var TouchableDemo =React.createClass({
    getInitialState: function() {
    return {
      eventLog: [],
    };
  },
  render: function() {
    return (
      
        
          this._appendEvent('press')}
             =>this._appendEvent('pressIn')}
             =>this._appendEvent('pressOut')}
             =>this._appendEvent('longPress')}>
            
              Press Me
            
          
        
        
          {this.state.eventLog.map((e, ii)=> {e})}
        
      
    );
  },
  _appendEvent: function(eventName) {
    var limit = 6;
    var eventLog = this.state.eventLog.slice(0,limit - 1);
    eventLog.unshift(eventName);
    this.setState({eventLog});
  },
});
const styles =StyleSheet.create({
  button: {
    color: '#007AFF',
  },
  wrapper: {
    borderRadius: 8,
  },
  eventLogBox: {
    padding: 10,
    margin: 10,
    height: 120,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: '#f0f0f0',
    backgroundColor: '#f9f9f9',
  },
});
AppRegistry.registerComponent('TouchableDemo',() => TouchableDemo);

       4.6.运行效果截图:

(五)TouchableNativeFeedback

           5.1.TouchableNativeFeedback组件介绍