ana sayfalarda gorunmesınde calısmasında sorun yok lakın

misal blog detayına tıklayınca BottomTab gorunsun ıstıyorum bunun ıcın ne yapmam gerekıyor bulamadım bır turlu

<TouchableOpacity
 onPress={() =>
 navigation.navigate('BlogDetay', {
  AlanID: (item.id),
 initial: true,
 })
 }
 >
</TouchableOpacity>

import React, {useState} from "react";
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import AsyncStorage from "@react-native-async-storage/async-storage";


import Renk from "../Com/Renk";


import HomeScreen from "./Home";
import EtkinlikScreen from "./Etkinlik";
import KampScreen from "./Kamp";
import GirisYap from "../Profil/GirisYap";
import UyeScreen from "../Profil/Ana";
import RotaScreen from "../Com/Search";
import SVGIcon from "../Com/icon";
import {StyleSheet} from "react-native";


const Tab = createBottomTabNavigator();
const BottomNavigator = () => {

    const [isLoggedIn, setValue] = useState('');

    AsyncStorage.getItem('userToken').then((storedValue) => {
        setValue(storedValue);
    });



    return (

        <Tab.Navigator
            screenOptions={{ headerShown: false }}
        >
            <Tab.Screen
                style={[
                    styles.fab

                ]}
                name="Ana Sayfa"
                component={HomeScreen}
                options={{
                    tabBarLabel: "Doğadakiler",
                    tabBarIcon: ({color}) => (
                        <SVGIcon icon="dogadakiler" size={25} color={color}/>
                    ),
                }}
            />
            <Tab.Screen
                name="Kamp"
                component={KampScreen}
                options={{
                    tabBarLabel: "Kamp Alanları",
                    tabBarIcon: ({color}) => (
                        <SVGIcon icon="cadir_kamp1" size={20} color={color}/>
                    ),
                }}
            />
            <Tab.Screen
                name="Etkinlikler"
                component={EtkinlikScreen}
                options={{
                    tabBarIcon: ({color}) => (
                        <SVGIcon icon="calendar" size={25} color={color}/>
                    ),
                }}
            />


            <Tab.Screen
                name="Rotalar"
                component={RotaScreen}
                options={{
                    tabBarIcon: ({color}) => (
                        <SVGIcon icon="cadir_kamp2" size={25} color={color}/>
                    ),
                }}
            />
            {isLoggedIn ? (
            <Tab.Screen
                name="Profil"
                component={UyeScreen}
                options={{
                    tabBarIcon: ({color}) => (
                        <SVGIcon icon="wc2" size={25} color={color}/>
                    ),
                    animationTypeForReplace: 'push',
                }}
            />
            ) : (

                <Tab.Screen
                    name="Profil"
                    component={GirisYap}
                    options={{
                        tabBarIcon: ({color}) => (
                            <SVGIcon icon="wc2" size={25} color={color}/>
                        ),
                        animationTypeForReplace: 'push',
                    }}
                />

            )}
        </Tab.Navigator>
    );
};

const styles = StyleSheet.create({
    bottom: {
        backgroundColor: Renk.mavi,
        padding: 0
    },
    fab: {
        padding: 0
    }

});

export default BottomNavigator;

import React from "react";
import {StatusBar} from "expo-status-bar";
import {NavigationContainer} from "@react-navigation/native";
import {createStackNavigator} from "@react-navigation/stack";


import BottomNavigator from "./Ekran/Menu";
import KampDetayScreen from "./Ekran/KampDetay";
import PopScreen from "./Com/PopUye";
import RotaScreen from "./Ekran/Rota";
import SearchScreen from "./Com/Search";
import BlogDetayScreen from "./Ekran/BlogDetay";
import BlogAnaScreen from "./Ekran/Blog/Ana";
import CopScreen from "./Com/Cop";
import FiltreScreen from "./Ekran/Filtre";
import AramaScreen from "./Com/Search";
import UyeScreen from "./Profil/Ana";
import GirisScreen from "./Profil/GirisYap";
import GonderiScreen from "./Profil/GonderiTek";



const Stack = createStackNavigator();

const App = () => {
    return (
        <NavigationContainer>
            <StatusBar hidden={true}/>
            <Stack.Navigator screenOptions={{headerShown: false}} initialRouteName="Home">
                <Stack.Screen name="Home" component={BottomNavigator}/>
                <Stack.Screen name="KampDetay" component={KampDetayScreen}/>
                <Stack.Screen name="PopUye" component={PopScreen}/>
                <Stack.Screen name="Rota" component={RotaScreen}/>
                <Stack.Screen name="Search" component={SearchScreen}/>
                <Stack.Screen name="Blog" component={BlogAnaScreen}/>
                <Stack.Screen name="BlogDetay" component={BlogDetayScreen}/>
                <Stack.Screen name="Cop" component={CopScreen}/>
                <Stack.Screen name="Filtre" component={FiltreScreen}/>
                <Stack.Screen name="Arama" component={AramaScreen}/>
                <Stack.Screen name="UyeDetay" component={UyeScreen}/>
                <Stack.Screen name="GirisYap" component={GirisScreen}/>
                <Stack.Screen name="GonderiTek" component={GonderiScreen}/>

            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default App;