React Native 常用組件之 Touchable

TouchableOpacity:不透明觸摸

該組件封裝了響應(yīng)觸摸事件;當(dāng)點擊按下的時候,該組件的透明度會降低。

  • 常用屬性:
  • activeOpacity (number):當(dāng)用戶觸摸的時候,組件的透明度;
  • 常用方法:
  • onPress:點擊;
  • onPressIn:按下;
  • onPressOut:抬起;
  • onLongPress:長按;
//ES5寫法
var main = React.createClass({
    getInitialState(){
        return{
            title:'不透明觸摸'
        }
    },
    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 style={{color:'white'}}>點擊事件</Text>
                    </View>
                </TouchableOpacity>
                <View>
                    <Text>{this.state.title}</Text>
                </View>
            </View>
        );
     },

     activeEvent(event){
       this.setState({
           title:event
       })
    },
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一. 簡介 React Native沒有像Web開發(fā)那樣給元素綁定click事件,Text組件有onPress事件...
    飛奔的小馬閱讀 1,552評論 0 0
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ),沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 7,431評論 33 15
  • 前言 本文有配套視頻,可以酌情觀看。 文中內(nèi)容因各人理解不同,可能會有所偏差,歡迎朋友們聯(lián)系我。 文中所有內(nèi)容僅供...
    珍此良辰閱讀 1,695評論 13 7
  • 前言 學(xué)習(xí)本系列內(nèi)容需要具備一定 HTML 開發(fā)基礎(chǔ),沒有基礎(chǔ)的朋友可以先轉(zhuǎn)至 HTML快速入門(一) 學(xué)習(xí) 本人...
    珍此良辰閱讀 6,530評論 0 9
  • 上彩云家的路張興走的越來越熟了,拿張興對彩云說的話就是,就你家,我閉著眼也能摸得到。這天店里的維修工王哥從家...
    聽雪1014閱讀 324評論 0 0

友情鏈接更多精彩內(nèi)容