[RN] 스크린 이동하기

📱테스트 환경

"react": "18.2.0"
"react-native": "0.74.2"

Nuxt 에서 사용하던 Router.push() 나

React 에서 사용하던 navigate 를 사용하고있었다.

간단하게 사용할 순 있는데 자꾸 까먹게되서 설정하는 방법을 기록하려고 한다.

const TestCalcScreen = ({navigation}: NavigateProps) => {
	return (...)
}

export default TextScreen

해당 컴포넌트를 생성할때 호출해주면된다.

NavigateProps 타입은 만들어서 사용해주면되는데

// types.tsx

import {NativeStackScreenProps} from '@react-navigation/native-stack';
import {RootStackParamList} from '../routes/routes.tsx';

export type NavigateProps = NativeStackScreenProps<RootStackParamList>;

// routes.tsx

export const RouteNames = {
  HOME_TAB: '홈 탭' as const,
  TEST: '테스트' as const,
  ...
};

export type RootStackParamList = {
  [RouteNames.HOME_TAB]: undefined;
  [RouteNames.TEST]: undefined;
  ...
};

이런식으로 만들어주면 에러를 피할 수 있다.

사용도 아주 간단한데

 onPress={() => {
	navigation.navigate(RouteNames.TEST);
}}

이렇게 해주면 페이지를 이동 할 수 있다.