zoukankan      html  css  js  c++  java
  • React Native中Touchable组件的使用

    截图如下:

    /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */
    
    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
      AlertIOS,
    } from 'react-native';
    
    
    // ES5写法
     var ViewDemo = React.createClass({
    
       getInitialState(){
    
         return{
           title: '不透明触摸'
         }
       },
       render() {
         return (
    
             <View style={styles.container} onPress = {this.rendPress()}>
    
         <TouchableOpacity activeOpacity = {0.2}
          onPress = {()=>this.activeEvent('点击了啦!!!')}
          onPressin = {()=>this.activeEvent('按下了啦!!!')}
          onPressout = {()=>this.activeEvent('抬起了啦!!!')}
          onLongPress = {()=>this.activeEvent('长按了啦!!!')}
          >
             <View style = {styles.innerStyle}>
                  <Text>点击事件</Text>
              </View>
         </TouchableOpacity>
         <View>
              <Text>{this.state.title}</Text>
         </View>
         </View>
       );
       },  // ,号在ES5必须写,ES6可以不写
    
       // 当按下鼠标
       rendPress(){
         AlertIOS.alert('点击了')
       },
       activeEvent(event){
         this.setState({
           title: event
         })
       }
    });
    
    
    // ES6写法
    
    /*
    class ViewDemo extends Component {
    
      render() {
        return (
    
          <View style={styles.container} onPress = {this.rendPress()}>
    
             <TouchableOpacity activeOpacity = {0.2}>
             <View style = {styles.innerStyle}>
                 <Text>我是文本,但是可以点击!!!</Text>
             </View>
             </TouchableOpacity>
         </View>
        );
      }
    
      // 当按下鼠标
      rendPress(){
        AlertIOS.alert('点击了')
      }
    }
    */
    
    const styles = StyleSheet.create({
      container: {
    
        backgroundColor: 'green',  // 设置背景颜色
         400,  // 宽度
        height: 300  // 高度 最后一个样式的,可以不写,其余的必须写,不然报错
      },
      innerStyle: {
        backgroundColor: 'red',
         300,
        height: 80,
        marginTop: 100,
      },
      innerStyle1: {
        backgroundColor: 'yellow',
         100
      },
    });
    
    AppRegistry.registerComponent('ViewDemo', () => ViewDemo);

    代码如下:

  • 相关阅读:
    hdu 4947
    hdu 4946
    hdu 4944
    hdu 4942
    hdu 4941
    PAT 【L2-011 玩转二叉树】
    PAT【L2-006 树的遍历】
    XYNUOJ 【2070: 重建二叉树】
    XYNUOJ 【1367: 二叉链表存储的二叉树】
    XYNUOJ 2390【二叉树遍历2】
  • 原文地址:https://www.cnblogs.com/pengsi/p/5903648.html
Copyright © 2011-2022 走看看