React Native中常用Touchable组件

/ 0评 / 0

Touchable组件就是点击事件了,之前我们做的登录页面只是页面,没有任何交互,有了点击事件,就有了交互的可能性。
首先需要添加用到的类库:TouchableOpacity(不透明触摸事件),AlertIOS(iOS弹框)


      {/*不透明触摸事件,属性为透明度*/}
      
          
              React-Native入门学习
          
      

这样设置之后点击按钮会有阴影出现,不透明度会改变。
添加响应事件方法

class pressView extends Component {
    render() {
        return (
            //
            this.renderPress()}>
                {/*不透明触摸事件,属性为透明度*/}
                
                    
                        React-Native入门学习
                    
                
            
        );
    }

    renderPress(){
        AlertIOS.alert('点击了')
    }
}

但是这种会出现问题,就是还没有点击,刷新页面的时候就会调用了,解决方法是使用老版本语法,上面这种写法是ES6的写法,我们介绍一下ES5的写法,更能理解一些东西

//ES5的写法
var pressView = React.createClass({
    //初始化的时候设置一个变量值
    getInitialState(){
        return{
            title:'不透明触摸'
        }
    },

    render() {
        return (
            
                {/*不透明触摸事件,属性为透明度*/}
                {/*常用事件*/}
                this.activeEvent('点击')}
                    onLongPress={()=>this.activeEvent('长按')}
                    onPressIn={()=>this.activeEvent('按下')}
                    onPressOut={()=>this.activeEvent('抬起')}
                >
                    
                        点击事件
                    
                
                
                    {this.state.title}
                
            
        );
    },

    //调用方法传参
    activeEvent(event) {
        this.setState({
            title:event
        }),
        AlertIOS.alert(this.state.title)
    }
})

这样就不会出现上面那种问题了,而且这样也有利于后面去理解生命周期。

评论已关闭。