React Native (2) - React Navigation ile Hooks ve ClassComponent ekranlarını gösterme

Merhaba,
bu yazımda react native ile geliştirdiğiniz uygulamalarınıza  react navigation'ı nasıl implemente edeceğinizi paylaşacağım.
React Navigation aracılığıyla ClassComponent ten Hooks ekranına, hooks ekranından da ClassComponent ekranına geçiş yapacağız.

ilk olarak react native ile bir proje oluşturun.

$ react-native init someProject

Terminal üzerinden projenin bulunduğu dizine gidin.

$ cd someProject

react navigation'ı projenize ekleyin

$ npm install @react-navigation/native $ npm install @react-navigation/stack

react navigation kullanmak için gereken bağımlılıkları ekleyin.

$ npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

60 öncesi react native versiyon kullanıyorsanız aşağıdaki komutla linkleme yapın.

$ react-native link

MAC ve iOS ile çalışıyorsanız aşağıdaki komutla iOS bağımlılıklarını indirin.

$ npx pod-install ios

touch ile src dizininde bir wrapper component oluşturun. Bu componentin içinde diğer componentleri load edeceğiz.

$ touch src/wrapper/index.js

index.js dosyasının içeriğini aşağıdaki şekilde güncelleyin.

import React, {Component} from 'react'; import {StyleSheet, Text, View, Button} from 'react-native'; import {NavigationContainer} from '@react-navigation/native'; import {createStackNavigator} from '@react-navigation/stack'; const Stack = createStackNavigator(); export default class Wrapper extends Component {   render() {     return (       <NavigationContainer>         <Stack.Navigator>           <Stack.Screen name="Home" component={Home} />           <Stack.Screen name="HomeHooks" component={HomeHooks} />         </Stack.Navigator>       </NavigationContainer>     );   } } export const HomeHooks = props => {   return (     <View>       <Text style={styles.paragraph}>Hello from HomeHooks</Text>       <Button         onPress={() => props.navigation.navigate('Home')}         title="GoToHome"       />     </View>   ); }; export class Home extends Component {   render() {     return (       <View>         <Text style={styles.paragraph}>Hello from Home</Text>         <Button           onPress={() => this.props.navigation.navigate('HomeHooks')}           title="GoToHomeHooks"         />       </View>     );   } } const styles = StyleSheet.create({   paragraph: {     margin: 24,     fontSize: 18,     fontWeight: 'bold',     textAlign: 'center',     color: 'red',   }, });

ios simulatorü ile veya android emulatoru ile sonucu gözlemlemek için projeyi çalıştırın.

iOS

$ react-native run-ios

andorid

$ react-native run-android

github: https://github.com/lvntyldz/tutorials/tree/react-navigation-impl/react-native-hooks-examples