기술

리액트 네이티브 Stack.Screen 컴포넌트에 props를 전달하는 방법

조회 325

profile picture

익명

2022년 12월 13일

안녕하세요, 리액트 네이티브 Stack.Screen에 들어가는 컴포넌트로 props를 넣어야하는데 방법을 몰라서 고민끝에 질문 올립니다. react-native/stack 라이브러리 사용중이고 StackNavigator를 사용하고 있습니다. 코드는 이런식입니다. <Stack.Navigator screenOptions={screenOptions}> <Stack.Screen name={ScreenNames.MyScreen} component={MyScreen} /> </Stack.Navigator> 위와 같이 Stack.Screen 컴포넌트에 MyScreen을 전달하는데 MyScreen에 props를 넘겨주어야 합니다.. 어떻게 해결할 수 있을까요?

구체적이고 정성스러운 질문에 Up 투표를 눌러주세요.

설명이 부족한 질문에 Down 투표를 눌러주세요. 커리어리가 질문자에게 수정을 요청할게요.

답변 2

지나가는개발자님의 프로필 사진

<Stack.Screen name={ScreenNames.MyScreen} component={()=>MyScreen(props)} /> export const HomeScreen = ({props}) => ... 요런식으로 props를 받으면 되지않을까요

권민수님의 프로필 사진

react-navigation 쓰고계신거 맞나요? Stack Navigator에서 직접 추가적인 prop을 주시려면, 문서(https://reactnavigation.org/docs/screen#children)에 나와있는 것 처럼 `component` prop을 활용하는 것이 아니라 `children`을 활용해주시면 될 것 같습니다. ``` <Stack.Navigator screenOptions={screenOptions}> <Stack.Screen name={ScreenNames.MyScreen}> {(props) => <MyScreen {...props} hello="world" />} </Stack.Screen> </Stack.Navigator> ``` 단, 문서에도 나와있듯이 이 방법을 사용하면 react-navigation이 알아서 잘 해주던 최적화 효과가 사라지므로, 성능 문제를 피하기 위해서 React.memo나 React.PureComponent를 써야할수도 있습니다.

profile picture

익명

작성자

2022년 12월 19일

react-navigation 쓰는 거 맞습니다 ㅎㅎ 답변 감사합니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직 개발자들의 명쾌한 답변을 얻을 수 있어요.