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

disabled是Touchable系列中最常使用的屬性,通常用於禁止按鈕觸發點擊事件,方法如下,

*disabled={true or false}

ture為禁止按鈕觸發點擊事件

false為按鈕可以觸發點擊事件

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

主程式部份,先用props與state,建立message與waiting這兩變數,再用TouchableWithoutFeedback創建disabled與onPress這兩方法,點擊物件為圖片,message以文字顯示,在onPress裡增加setTimeout與Alert

接下來是Style程式,

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

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

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

render() {
return (
/*
創造TouchableWithoutFeedback,
disabled如果為true,就禁止一律操作
onPress點擊方法
           setTimeout設定兩秒後執行
*/
<View style={styles.container}>
<TouchableWithoutFeedback
               disabled={this.state.waiting}
onPress={()=> {this.setState({message:'等待中...',waiting: true})
               setTimeout(()=>{
                       this.setState({message:'請點擊',waiting:false})
                       Alert.alert('This is cat!!')
                   },2000)
               }}
>
<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
}
});