React Native / Buton İşlemleri

2. Sınıf Öğrencileri İçin Sunular 1
5. Sınıf Öğrencileri Için Sunular 13
8. Sınıf Öğrencileri İçin Sunular 23
Belirli Gün Ve Haftalar 1
Bilgisayar Donanımları 5
Bilgisayar Programlama 2
Bilgisayar Yazılım 2
Bilişim Teknolojileri Ve Yazılım Temel Bilgisayar 64
Biyografiler 2
Biyoloji 2
Değerler Eğitimi 4
Eba Elektronik Bilişim Ağı 5
Eğitim-Öğretim Sunuları 3
Felsefe 2
İslam 3
Kelime İşlemci 1
Kişisel Gelişim 4
Kodlama, Robotic 4
Ortak Eğitim Proje Sunuları. 2
Problem Çözme Ve Algoritmalar 3
Proje Nedir? Nasıl Yapılır? 1
Rehberlik 16
Sağlık 3
Savaşlar 1
Scratch 1
Seminerler 3
Sınav Kaygısı 2
Sosyal Bilgiler 1
Sosyal Bilgiler 1
Tarih 1
Ulaşım Araçları 1
Verimli Ders Çalışma 1
Web Araçları 0
Windows İşletim Sistemi 1
Yarışmalar 0

Buton İşlemleri

Buton Özellikleri

Prop	Type	Required	Description
onPress	function	yes	Call the handler when user clicks the button.
title	string	yes	Display the text inside the button.
accessibilityLabel	string	no	Display the text for blindness accessibility features.
color	Color	no	Set the background color of the Android button or set the color of iOS text.
disabled	bool	no	It disables all interactions for this component, if true.
textID	string	no	Used to locate this view in end-to-end tests.
hasTVPreferredFocus	bool	no	It preferred TV focus work only for Apple TV.

Örnek 1

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';

const ButonOrnegi1=()=>{
return (
<View>
<Button

title='Merhaba'

onPress ={() => {
alert("test");
}}

/>
</View>
);
};

export default ButonOrnegi1;

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';

const Yaz=()=>{
return alert("merhaba");
};

const Mesaj=()=>{
return(
<View>
<Button
title="Tıkla"
onPress={Yaz}
/>
</View>
);
};

export default Mesaj;

Buton İşlemleri

Örnek 2

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

export default class ButtonBasics extends Component {
onPressButton() {
Alert.alert('You clicked the button!')
}

render() {
return (
<View style={styles.container}>
<View style={styles.buttonContainer}>
<Button
onPress={this.onPressButton}
title="Press Me"
/>
</View>
<View style={styles.buttonContainer}>
<Button
onPress={this.onPressButton}
title="Press Me"
color="#009933"
/>
</View>
<View style={styles.multiButtonContainer}>
<Button
onPress={this.onPressButton}
title="A disabled button"
disabled={true}
/>
<Button
onPress={this.onPressButton}
title="OK!"
color="#009933"
/>
</View>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
},
buttonContainer: {
margin: 20
},
multiButtonContainer: {
margin: 20,
flexDirection: 'row',
justifyContent: 'space-between'
}
})

Buton İşlemleri

Örnek 3

import React, {useState} from 'react';
import {Button, Text, View} from 'react-native';

const Mesaj=()=>{

const [Sayi, Sayac] = useState(0);

return(
<View
style={{
marginTop:30
}}>
<Button
title="Tıkla"
onPress={()=>{Sayac(Sayi+1)}}
/>

<Text
style={{
fontSize:100,
textAlign:'center',
color: 'blue',
fontWeight:'900'
}}
>{Sayi}</Text>

<Button
title="Reset"
onPress={()=>{Sayac(0)}}
/>
</View>
);
};

export default Mesaj;

Buton İşlemleri