[React-Native教學筆記]<TouchableWithoutFeedback>觸控方法之onPressIn與onPressOut @ Michael_Jheng的部落格

onPressIn與onPressOut分別是開始點擊與點擊結束,按住不放就會執行onPressIn裡的方法,只要放手就會執行onPressOut裡的方法,

<TouchableWithoutFeedback

onPressIn={()=> {

按住不放執行方法或函數

}}
onPressOut={()=>{

放手執行方法或函數

}}

</TouchableWithoutFeedback>

首先介紹TouchableWithoutFeedback為這次觸控標籤,如下所示,

主程式部份,先用props與state,建立message與startTime這兩變數,再用TouchableWithoutFeedback創建onPressIn與onPressOut這兩方法,點擊物件為圖片,message以文字顯示,在onPressIn裡增加讀取目前時間的方法,onPressOut增加方法為目前的時間減去上一個時間

接下來是Style程式,

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

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

export default class AwesomeProject extends Component {
constructor(props){
super(props);//呼叫對應的父類別建構元,props
this.state = {message: '請點擊', startTime: 0};//狀態初始化,message變數為'請點擊',startTime變數為0
}

render() {
return (
/*
創造TouchableWithoutFeedback,
onPressIn按住開始執行程式
           onPressOut為放開點擊結束執行顯示結果
*/
<View style={styles.container}>
<TouchableWithoutFeedback
               onPressIn={()=> {
                   this.setState({message:'開始', startTime: new Date().getTime()})
               }}
               onPressOut={()=>{
                   this.setState({message:'結束,持續時間:' + (new Date().getTime() - this.state.startTime) + 'ms'})
               }}
>
<Image
style={styles.pictureSize}
source={require('./picture/cat.jpg')}
/>
</TouchableWithoutFeedback>
<Text style={styles.fontSize24}>{this.state.message}</Text>

</View>
);
}
}

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