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

智慧手機可讓用戶使用手指做到點擊按鈕,滾動列表,放大地圖,這裡先介紹點擊按鈕,程式方面首先在解構指派增加 Alert 與Button, Alert 為彈出視窗,Button為按鈕,如下所示,

在主程式部份,使用View來配置畫面與按鈕顯示方式,再創造Button,其中也要撰寫觸發Button後要執行的函式與動作,如下程式是按下Button後,彈出視窗會顯示"You tapped the button!"

接下來是Style程式,

最後注意,此Button預設顏色為藍色,而IOS與Android預設顯示方式也有不同,

IOS

Android

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

import {
AppRegistry,
StyleSheet,
Alert,
Button,
View
} from 'react-native';

export default class AwesomeProject extends Component {
//當Button觸發執行下列程式
_onPressButton() {
Alert.alert('You tapped the button!')
}

render() {
return (
       /*
           創造Button,觸發函式為_onPressButton,title設置Button名稱
       */
       <View style={styles.container}>
           <View style={styles.buttonContainer}>
               <Button
                   onPress={this._onPressButton}
                   title="Press Me"
               />
           </View>
       </View>
);
}
}

const styles = StyleSheet.create({
/*
   父類別flex:1充滿整個空間
   justifyContent: 'center' 佈局對齊方式:中間
*/
container: {
flex: 1,
justifyContent: 'center',
},
/*
   設置此物件左右之餘量
*/
buttonContainer: {
margin: 20
}
});

在Node.js command prompt執行"react-native run-android",即可安裝在模擬器或手機上演示,