[React-Native教學筆記]<TouchableHighlight>觸控方法之二 @ Michael_Jheng的部落格

介紹TouchableHighlight可以使用的方法,

*activeOpacity={0 ~ 0.85}

背景底色的透明程度,0為無透明,0.85是透明度最小的值,超過0.85就是全透明,完全看不到背景底色

*onHideUnderlay={()=>{要執行的方法}}

當未被觸控時,執行此方法

*onShowUnderlay={()=>{要執行的方法}}

當已被觸控時,執行此方法

*style={所設置之風格}

顯示設置的風格

*underlayColor="背景色"

設定背景底色

*onPress={要執行的方法}

短時間觸控執行方法

,或

*onLongPress={要執行的方法}

長時間觸控執行方法

接下來是範例程式介紹,TouchableHighlight為這次觸控標籤,如下所示,

在主程式部份如下,

接下來是Style程式,

接下來修改在[筆記]安裝React-Native與創造第一個專案,所創造的專案來演示此功能,

import {
AppRegistry,
StyleSheet,
TouchableHighlight,
Image,
Text,
View
} from 'react-native';

export default class AwesomeProject extends Component {

/* 宣告變數text */
constructor(props) {
super(props);//呼叫對應的父類別建構元,props
this.state = {text:'底色被隐藏'};//狀態初始化,text變數為底色被隐藏
}

//當Button觸發執行下列程式

_onPressButton(){

}

render() {
return (
       /*
           創造TouchableHighlight,
           可用方法有style,activeOpacity(背景色亮度),underlayColor(背景色)
           onHideUnderlay(未觸控時,隱藏方法執行),onShowUnderlay(已觸控時,顯示方法執行)
           onPress(短時間觸控執行方法),或onLongPress(長時間觸控執行方法)
       */
       <View style={styles.container}>
           <TouchableHighlight
               style={styles.touchStyle}
               activeOpacity={0}
               underlayColor="red"
               onHideUnderlay={()=>{this.setState({text:'底色被隐藏'})}}
               onShowUnderlay={()=>{this.setState({text:'底色顯示'})}}
               onPress={this._onPressButton}
           >
               <Image
                   style={styles.pictureSize}
                   source={require('./picture/cat.jpg')}
               />
           </TouchableHighlight>
           <Text>{this.state.text}</Text>
       </View>
);
}
}

const styles = StyleSheet.create({
/*
   父類別flex:1充滿整個空間
   justifyContent: 'center' 佈局對齊方式:中間
   alignItems: 'center' 項目對齊方式:中間
*/
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
/*
   width: 400
   height: 330
   justifyContent: 'center' 佈局對齊方式:中間
   alignItems: 'center' 項目對齊方式:中間
*/
touchStyle: {
   width: 400,
   height: 330,
   justifyContent: 'center',
   alignItems: 'center'
},
/*
   設置圖片大小
*/
pictureSize: {
width: 300,
   height: 230
}
});