react native BottomTabNavigator
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;
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (0)
Henüz kimse cevap yazmadı. İlk cevap yazan sen ol!