bu yazımda react native ile state'e değer set etmeyi ve bu değeri stateten okumayı paylaşacağım.
ClassComponent yapısıyla ve Hooks yapısıyla state üzerindeki değeri hem değiştirerek hem de okuyarak ekrana yazdıracağız.
Aşağıdaki adımları takip ederek sizde projenizde state set/get işlemlerini uygulayabilirsiniz.
ilk olarak react native ile bir proje oluşturun.
$ 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, TextInput, View} from 'react-native'; export default class App extends Component { render() { return ( <View style={{flex: 1}}> <Login /> <LoginHooks /> </View> ); } } export class Login extends Component { constructor(props) { super(props); this.state = { username: '', }; } render() { return ( <View style={styles.container}> <Text style={styles.paragraph}>{this.state.username}</Text> <TextInput style={styles.input} onChangeText={text => this.setState({username: text})} /> </View> ); } } export const LoginHooks = props => { const [username, setUsername] = useState(); return ( <View style={styles.container}> <Text style={styles.paragraph}>{username}</Text> <TextInput style={styles.input} onChangeText={text => setUsername(text)} /> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, padding: 10, margin: 20, backgroundColor: 'skyblue', }, input: {height: 40, borderWidth: 1, marginBottom: 10}, paragraph: { margin: 24, fontSize: 18, fontWeight: 'bold', textAlign: 'center', color: 'red', }, }); |
birkaç önemli kısım:
- useState methodunu React tan import ederek bu method aracılığıla hooks yapısında state değişikliği yapılır.
- state'te tutulan değer yine useState methodu aracılığıyla alınır.
- cons [x,y] = useState(); şeklindeki tanımda x değer y ise bu değeri güncelleyecek fonksiyondur.
- ClassComponent yapısında ise yine constructor üzerinde state objesi oluşturulur.
- const {x} = this.state ile ClassComponent'e tutulan state değerlerine erişilir.
- state teki x değerini ClassComponent yapısında değiştirmek için ise this.setState({x:<VALUE>}) şeklinde kodlama yapmak gerekir.
github(state) : https://github.com/lvntyldz/tutorials/tree/3-react-hooks-setstate/react-native-hooks-examples
github(projenin tamamı) : https://github.com/lvntyldz/tutorials/tree/master/react-native-hooks-examples