React Native (3) - Hooks ve ClassComponent ile stateden değer almak

Merhaba,
bu yazımda react native ile state te değer tutmayı paylaşacağım. ClassComponent yapısıyla ve Hooks yapısıyla state üzerindeki değeri okuyarak ekrana yazdıracağız.

Aşağıdaki adımları takip ederek hem hooks tan hemde ClassComponent ten message içeriğini alarak ekrana yazdırmayı görebilirsiniz.

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, View} from 'react-native'; export const MessagesHooks = props => {   const [message, setMessage] = useState(     'Hello from MessagesHooks - This is state message',   );   return (     <View style={styles.hook}>       <Text style={styles.paragraph}>{message}</Text>     </View>   ); }; export class Messages extends Component {   constructor(props) {     super(props);     this.state = {       message: 'Hello from Messages - This is state message',     };   }   render() {     return (       <View style={styles.message}>         <Text style={styles.paragraph}>{this.state.message}</Text>       </View>     );   } } export default class App extends Component {   render() {     return (       <View style={styles.main}>         <Messages />         <MessagesHooks />       </View>     );   } } const styles = StyleSheet.create({   main: {     flex: 1,   },   hook: {     flex: 1,     backgroundColor: 'skyblue',   },   message: {     flex: 1,     backgroundColor: 'steelblue',   },   paragraph: {     margin: 24,     fontSize: 18,     fontWeight: 'bold',     textAlign: 'center',     color: 'red',   }, });

birkaç önemli nokta:

• ClassComponent ile state oluştururken bir constructor tanımlanır ve bu constructor içinde state oluşturulur.
• ClassComponent'in içinden yada render methodundan this.state diyerek state teki değerler okunabilir.
• Hooks yapısında state kullanabilmek için ilk olarak React tan useState methodunu import etmek gerekmektedir.
• useState import edildikten sonra  hooks methodunun içinde const [message, setMessage] = useState(...); şeklinde tanımlamayla message değerinin state te tutulacağını ve bunun setMessage methoduyla güncelleneceği belirtilir.
• Hooks ile state kullanımı yapılırken  useState fonksiyonuna verilen parametre state' in inital değeri olmaktadır. useState("varsayilan değer");

github(state) : https://github.com/lvntyldz/tutorials/tree/2-react-hooks-usestate/react-native-hooks-examples
github(projenin tamamı) : https://github.com/lvntyldz/tutorials/tree/master/react-native-hooks-examples