v2.5.2
Giriş yap

react native BottomTabNavigator

qplot
315 defa görüntülendi

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;

Cevap yaz
Cevaplar (0)
Henüz kimse cevap yazmadı. İlk cevap yazan sen ol!