inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

React Native with Expo: 제로초에게 제대로 배우기

라우터가 아닌 컴포넌트는 어디에 있어야 할까?

탭 전환 안됨

100

khs1003k

작성한 질문수 5

0

강의 잘 따라가다가 로그인까지 성공했는데 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>
      </>
  );
}

react react-native 하이브리드-앱 typescript expo

답변 2

0

제로초(조현영)

아, 지금 눈치챘는데 e.preventDefault();를 if문 안에 넣으셔야 합니다.

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