bu yazımda React Native ile multi state kullanımını inceleyeceğiz.
Counter örneğini ele alarak ilerlenilecektir.
İlk olarak reactın eski versiyonlarında gelen ClassComponent yapısıyla startCount ve endCount değerlerini ayrı ayrı güncelleyip güncel değerleri ekranda gösterilecektir.
ikinci olarak ise Hook yapısıyla birlikte gelen useState methodu aracılığıyla yine aynı değerler farklı bir component içinde güncellenip ekrana basılacaktır.
ClassComponent yapısını gösteren "RangeCounter" component'i, Hooks yapısı için ise "RangeCounterHooks" oluşturulacaktır.
Aşağıdaki adımları takip ederek sizde kendi çalışma ortamında örneği uygulayabilirsiniz.
ilk olarak react native ile bir proje oluşturun.
Terminal üzerinden projenin bulunduğu dizine gidin.
kök dizindeki App.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.
Önemli kısımlardan bazıları:
$ react-native init someProject
|
Terminal üzerinden projenin bulunduğu dizine gidin.
$ cd someProject
|
kök dizindeki App.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.
import React, {Component, useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {AppButton} from 'appComponent/Button';
export default class App extends Component {
render() {
return (
<>
<RangeCounter />
<RangeCounterHooks />
</>
);
}
}
export class RangeCounter extends Component {
constructor(props) {
super(props);
this.state = {
start: 0,
end: 0,
};
}
handleStartOnPress = () => {
const startValue = (this.state.start += 1);
this.setState({start: startValue});
};
handleEndOnPress = () => {
const endValue = (this.state.end += 1);
this.setState({end: endValue});
};
render() {
return (
<View style={styles.container}>
<View style={styles.groupping}>
<Text style={styles.paragraph1}>
start value : {this.state.start}
</Text>
<Text style={styles.paragraph2}>end value : {this.state.end}</Text>
</View>
<View style={styles.groupping}>
<AppButton
style={{marginTop: 10}}
title="increase start count"
onBtnPress={() => this.handleStartOnPress()}
/>
<AppButton
style={{marginTop: 10}}
title="increase end count"
onBtnPress={() => this.handleEndOnPress()}
/>
</View>
</View>
);
}
}
export const RangeCounterHooks = props => {
const [start, setStart] = useState(0);
const [end, setEnd] = useState(0);
return (
<View style={styles.container}>
<View style={styles.groupping}>
<Text style={styles.paragraph1}>start value : {start}</Text>
<Text style={styles.paragraph2}>end value : {end}</Text>
</View>
<View style={styles.groupping}>
<AppButton
style={{marginTop: 10}}
title="increase start count"
onBtnPress={() => setStart(start + 1)}
/>
<AppButton
style={{marginTop: 10}}
title="increase end count"
onBtnPress={() => setEnd(end + 1)}
/>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
margin: 10,
},
input: {height: 40, borderWidth: 1, marginBottom: 10},
paragraph1: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: 'blue',
},
paragraph2: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
groupping: {
flexDirection: 'row',
},
});
|
Önemli kısımlardan bazıları:
- ClassComponent yapısında start ve end değerleri constructor da bir state oluşturlarak tutulur.
- Hooks yapısında ise useState methodu ile Hooks üzerinde start ve end değerleri tutulur.
- ClassComponent yapısında this.setState({start: startValue}) şeklide state üzerinden güncelleme yapılır.
- Hooks yapısında ise useState ten dönen setStart(<YENI_DEGER>) şeklinde state değişikliği yapılır.
github(state) : https://github.com/lvntyldz/tutorials/tree/4-react-hooks-multistate/react-native-hooks-examples
github(projenin tamamı) : https://github.com/lvntyldz/tutorials/tree/master/react-native-hooks-examples
Hiç yorum yok:
Yorum Gönder