React Native (4) - Hooks ve ClassComponent ile stateden değer yazmak ve okumak

Merhaba,
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