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

TouchableOpacity在觸控後會使物件變透明,在撰寫時可以設定透明度,首先介紹TouchableOpacity為這次觸控標籤,如下所示,

在主程式部份,使用View來配置畫面,創造TouchableOpacity撰寫觸發後要執行的函式與動作,透明度利用activeOpacity來做設定,預設透明度為0.2,這裡設定為0.5來測試,其中透明度參數越大,透明度就越低,反之透明度參數越小,透明度就越高,程式如下,

接下來是Style程式,

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

import {

AppRegistry,
StyleSheet,
TouchableOpacity,
Image,
View
} from 'react-native';

export default class AwesomeProject extends Component {

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

_onPressButton(){

}

render() {
return (
       /*
           創造TouchableOpacity,
           可用方法有activeOpacity(圖片透明度),預設透明度為0.2
           這裡設定為0.5
       */
       <View style={styles.container}>
           <TouchableOpacity
               activeOpacity={0.5}
               onPress={this._onPressButton}
           >
               <Image
                   style={styles.pictureSize}
                   source={require('./picture/cat.jpg')}
               />
           </TouchableOpacity>
       </View>
);
}
}

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