Demo react native nav

import { useState, useEffect } from 'react';
import { Button, Text, TextInput, View, StyleSheet, TouchableHighlight } from 'react-native';

// Bước 1: import thư viện
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';


//Bước 2: Tạo ra một đối tượng Stack 
const StackDemo = createNativeStackNavigator();


// Bước 4: Định nghĩa component các màn hình ------------------------------------------------
const TrangChu = () => {
  const navigation = useNavigation();

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // xử lý sự kiện ở đây
      console.log("goi home");
      
    });

    return unsubscribe;
  }, [navigation]);

  return (
    <View style={{ backgroundColor: "yellow" }}>
      <Text style={{ fontSize: 30 }}>Đây là màn  </Text>

      <TouchableHighlight  activeOpacity={0.6}  underlayColor="pink" 
        onPress={() => { navigation.navigate('About') }}>
        <Text> Sang màn hình Giới thiệu</Text>
      </TouchableHighlight>

    </View>
  );
}

const GioiThieu = () => {
  const navigation = useNavigation();

 

  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // xử lý sự kiện ở đây
      console.log("goi gioi thieu");
      
    });

    return unsubscribe;
  }, [navigation]);




  return (
    <View style={{ backgroundColor: "cyan" }}>
      <Text style={{ fontSize: 30 }}>Màn hình giới thiệu</Text>

      <Text onPress={() => { navigation.navigate('Home') }}>Về trang chủ</Text>

    </View>
  );
}
// hết bước 4 ------------------------------------------------

const DemoApp = () => {

  return (
    // Bước 3: Định nghĩa Navigation 
    //Tình huống 1: App chính chỉ có Nav
    <NavigationContainer>
      <StackDemo.Navigator initialRouteName='Home'>
        <StackDemo.Screen name='Home' component={TrangChu} options={{ title: 'Trang chủ' }} />
        <StackDemo.Screen name='About' component={GioiThieu} options={{ title: 'Giới thiệu' }} />

      </StackDemo.Navigator>
    </NavigationContainer>

  )
}
 

export default DemoApp;