react-native HOC 관련 질문입니다.

Question

현재 react-native에서 HOC를 구현하려 하려 하는데 Error: Got an invalid value for 'component' prop for the screen 'LoginPage'. It must be a valid React Component. This error is located at: in NativeStackNavigator (created by RootStack) in RootStack (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in Provider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in ProjectEnv(RootComponent), js engine: hermes이런 에러가 발생합니다. 제 HOC 코드는 import React, {useEffect} from 'react'; import {useDispatch} from 'react-redux'; import {auth} from '../_actions/user_action'; import {useNavigation} from '@react-navigation/native'; export function Auth(SpecificComponent, option, adminRoute = null) { function AuthentificationCheck() { const dispatch = useDispatch(); const navigation = useNavigation(); useEffect(() => { dispatch(auth()).then(res => { if (!res.payload.isAuth) { if (option) { navigation.navigate('LoginPage'); } } else { if (adminRoute && !res.payload.isAdmin) navigation.navigate('Home'); else { if (option === false) navigation.navigate('Home'); } } }); }, []); return ; } return ; } App.js 코드는 import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import LandingPage from './src/components/views/LandingPage/LandingPage'; import LoginPage from './src/components/views/LoginPage/LoginPage'; import MissionPage from './src/components/views/MissionPage/MissionPage'; import RegisterPage from './src/components/views/Registerage/RegisterPage'; import UserPage from './src/components/views/UserPage/UserPage'; import {Provider} from 'react-redux'; import ReduxThunk from 'redux-thunk'; import Reducer from './src/_reducers'; import promiseMiddleware from 'redux-promise'; import {applyMiddleware, createStore} from 'redux'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import Icon from 'react-native-vector-icons/Ionicons'; import {Auth} from './src/hoc/auth'; const createStoreWithMiddleware = applyMiddleware( promiseMiddleware, ReduxThunk, )(createStore); const Tab = createBottomTabNavigator(); const Stack = createNativeStackNavigator(); function RootStack() { return ( //false : 로그인 유저 출입 불가능 //true : 로그인 유저 출입가능 ); } function BottomTabStack() { return ( ({ tabBarIcon: ({focused, color, size}) => { let iconName; if (route.name === 'Home') { iconName = focused ? 'home' : 'home'; } else if (route.name === 'User') { iconName = focused ? 'ios-person' : 'ios-person'; } else if (route.name === 'Mission') { iconName = focused ? 'ios-list-outline' : 'ios-list-outline'; } // You can return any component that you like here! return ; }, tabBarActiveTintColor: 'green', tabBarInactiveTintColor: 'gray', })}> ); } export default function App() { return ( ); } 이렇습니다.Auth 함수에서 return , return return ;으로 컴포넌트를 반환하는데 왜 저런 에러가 발생할까요??ㅠㅠㅠ 구글링해서 각 LandingPage, LoginPage 등 페이지 코드에서 직접 export default Auth(LandingPage, null) 등으로 바꾸어봐도 똑같은 결과가 나오네요ㅠㅠㅠ

김갑수갑수 · Answer

import React, {useEffect} from 'react'; import {useDispatch} from 'react-redux'; import {auth} from '../_actions/user_action'; import {useNavigation} from '@react-navigation/native'; export function Auth(Component, option, adminRoute = null) { function AuthenticationCheck() { const dispatch = useDispatch(); const navigation = useNavigation(); useEffect(() => { dispatch(auth()).then(res => { if (!res.payload.isAuth) { if (option) { navigation.navigate('LoginPage'); } } else { if (adminRoute && !res.payload.isAdmin) navigation.navigate('Home'); else { if (option === false) navigation.navigate('Home'); } } }); }, []); return <Component />; } return AuthenticationCheck; } 오히려 이렇게 그냥 함수를 return해야 하네요. 혹시 같은 에러 발생하시는 분들은 return 형식 계속 바꿔보세요!

react-native HOC 관련 질문입니다.

1개의 답변

Q&A 목록