탭 전환 안됨
100
작성한 질문수 5
강의 잘 따라가다가 로그인까지 성공했는데 20강부터 갑자기 add,activity,user탭을 눌러도 전환이 안돼요.. home이랑 search만 전환이 됩니다. 에러도 안떠서 어디부터 잘못된건지 감이 안 오는데 어떤 파일을 확인해야 할까요?
app/(tabs)_layout.tsx 입니다
import { Ionicons } from "@expo/vector-icons";
import { type BottomTabBarButtonProps } from "@react-navigation/bottom-tabs";
import { Tabs, useRouter } from "expo-router";
import { useContext, useRef, useState } from "react";
import { Animated, Modal, Pressable, Text, TouchableOpacity, View } from "react-native";
import { AuthContext } from "../_layout";
export default function TabLayout(){
const router=useRouter();
const [isLoginModalOpen,setIsLoginModalOpen]=useState(false);
const {user}=useContext(AuthContext);
const isLoggedIn = !!user;
const openLoginModal=()=>{
setIsLoginModalOpen(true);
};
const closeLoginModal=()=>{
setIsLoginModalOpen(false);
};
const toLoginPage= ()=>{
setIsLoginModalOpen(false);
router.push("/login");
}
const AnimatedTabBarButton=({
children,
onPress,
style,
...restProps
}: BottomTabBarButtonProps)=>{
const scaleValue=useRef(new Animated.Value(1)).current;
const handlePressOut=()=>{
Animated.sequence([
Animated.spring(scaleValue,{
toValue:1.2,
useNativeDriver:true,
speed:200,
}),
Animated.spring(scaleValue,{
toValue:1,
useNativeDriver:true,
speed:200,
}),
]).start();
}
return (
<Pressable
onPress={onPress}
onPressOut={handlePressOut}
style={[{ flex: 1, justifyContent: "center", alignItems: "center" }, style]}
android_ripple={{ borderless: false, radius: 0 }}
>
<Animated.View style={{ transform: [{ scale: scaleValue }] }}>
{children}
</Animated.View>
</Pressable>
);
}
return (
<>
<Tabs
backBehavior="history"
screenOptions={{
headerShown:false,
tabBarButton: (props)=><AnimatedTabBarButton {...props}/>,
}}
>
<Tabs.Screen
name="(home)"
options={{
tabBarLabel:()=>null,
tabBarIcon:({focused})=>(
<Ionicons
name="home"
size={24}
color={focused ? "black":"gray"}/>
),
}}
/>
<Tabs.Screen name="search"
options={{
tabBarLabel:()=>null,
tabBarIcon:({focused})=>(
<Ionicons
name="search"
size={24}
color={focused ? "black":"gray"}/>
),
}}/>
<Tabs.Screen name="add"
listeners={{
tabPress:(e)=>{
e.preventDefault();
if(!isLoggedIn){
openLoginModal();
}
}
}}
options={{
tabBarLabel:()=>null,
tabBarIcon:({focused})=>(
<Ionicons
name="add"
size={24}
color={focused ? "black":"gray"}/>
),
}}
/>
<Tabs.Screen name="activity"
listeners={{
tabPress:(e)=>{
e.preventDefault();
if(!isLoggedIn){
openLoginModal();
}
},
}}
options={{
tabBarLabel:()=>null,
tabBarIcon:({focused})=>(
<Ionicons
name="heart-outline"
size={24}
color={focused ? "black":"gray"}/>
),
}}/>
<Tabs.Screen name="[username]"
listeners={{
tabPress:(e)=>{
e.preventDefault();
if(!isLoggedIn){
openLoginModal();
}
},
}}
options={{
tabBarLabel:()=>null,
tabBarIcon:({focused})=>(
<Ionicons
name="person-outline"
size={24}
color={focused ? "black":"gray"}/>
),
}}/>
<Tabs.Screen
name="(post)/[username]/post/[postID]"
options={{
href:null,
}}
/>
</Tabs>
<Modal
visible={isLoginModalOpen} transparent={true} animationType="slide"
>
<View
style={{
flex:1,
justifyContent:"flex-end",
backgroundColor:"rgba(0,0,0,0.5)"
}}>
<View style={{backgroundColor:"white",padding:20}}>
<Pressable onPress={toLoginPage}>
<Text>Login Modal</Text>
</Pressable>
<TouchableOpacity
onPress={closeLoginModal}>
<Ionicons name="close" size={24} color='#555'/>
</TouchableOpacity>
</View>
</View>
</Modal>
</>
);
}
답변 2
0
tabPress 내부에 콘솔로그 넣어서 클릭 시 콘솔 뜨나 한 번 해보시고요. 콘솔이 안 뜨거나 하면 앱 지웠다 다시 설치해보셔야 합니다. 에뮬레이터가 이런 문제가 좀 많습니다.
expo-blur 사용하면서 생긴 버그입니다.
0
113
3
router.navigate 동작이 달라졌을까요?
0
64
1
Toast 기능
0
76
2
onEndReached 함수가 바로 호출 되지 않는 이슈
1
63
1
expo push service에 관한 질문
0
79
2
ios에서 개발중이신 분들은
1
85
1
[질문아님] tabBarLabel 대신 tabBarShowLabel
1
58
1
Location.getCurrentPositionAsync({}); 에러
1
125
3
.
0
122
2
EAS preview 빌드 후 Device에서 카카오 로그인 브라우저가 안켜짐
0
120
2
폴더 구조 관련 질문
0
133
2
혹시 리액트네이티브 관련해서 좋은 참고서도 있을까요??
0
105
1
제로초님께서는 Nativewind는 사용안하지는지 궁금합니다.
1
272
2
.
0
89
2
eas build:configure 안되는데, "git"이 반드시 설치되어 있어야 하나요?
0
81
2
.
0
104
2
혹시 해당 강의 보면서 테스트용으로 사용할 맥북을 구매할 예정인데 어느정도 스펙 이상으로 사야 할지 의견 받아볼수있을까요?
0
73
2
.
0
114
1
.
0
120
2
기기에서는 네트워크 에러가 납니다.
0
101
2
빌드 문의드립니다.
0
73
1
.
0
126
2
.
0
83
2
Expo-blur unimplement 오류
0
106
3





