navigator & Typescript

에러사항

해결

https://0biglife.tistory.com/19 : 실패
https://youngslog.medium.com/%EB%B2%88%EC%97%AD-type-checking-with-typescript-react-navigation-bacbcf901be4 : 해결

// Auth.tsx

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { Signup, Signin } from '../screens';

// screen 추가 될 때 마다 추가 // ⭐️⭐️⭐️⭐️⭐️
export type AuthStackParamList = {
  Signin: undefined;
  Signup: undefined;
  Profile: { user: object }; // route 및 params전달시
};

// ⭐️⭐️⭐️⭐️⭐️
const Stack = createStackNavigator<AuthStackParamList>();

const Auth = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Signin"
        component={Signin}
        options={{ headerShown: false }}
      />
      <Stack.Screen name="Signup" component={Signup} />
    </Stack.Navigator>
  );
};

export default Auth;

그리고 해당 스크린으로 가서 아래 사항을 작성

import React from 'react';
import styled from 'styled-components/native';
import { themeType } from '../theme';
import { Button } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
// ⭐️⭐️⭐️⭐️⭐️
import { StackNavigationProp } from '@react-navigation/stack'; 
import { AuthStackParamList } from '../navigations/Auth';

const Conatiner = styled.View<styledPropsType>`
  flex: 1;
  justify-content: center;
  align-items: center;
  background-color: ${({ theme }) => theme.background};
  padding: 0 20px;
  padding-top: ${({ insets }) => insets.top}px;
  padding-bottom: ${({ insets }) => insets.bottom}px;
  padding-left: ${({ insets }) => insets.left}px;
  padding-right: ${({ insets }) => insets.right}px;
`;

const StyledText = styled.Text`
  font-size: 30px;
  color: ${({ theme }: { theme: themeType }) => theme.text};
`;

interface styledPropsType {
  insets: {
    bottom: number;
    left: number;
    right: number;
    top: number;
  };
  theme: themeType;
}

// ⭐️⭐️⭐️⭐️⭐️
type SigninScreenNavPropsType = StackNavigationProp<
  AuthStackParamList,
  'Signin'
>;

// ⭐️⭐️⭐️⭐️⭐️
type Props = {
  navigation: SigninScreenNavPropsType;
};

// ⭐️⭐️⭐️⭐️⭐️
const Signin = ({ navigation }: Props) => {
  const insets = useSafeAreaInsets();

  return (
    <Conatiner insets={insets}>
      <StyledText>Signin</StyledText>
      <Button
        title="signup"
        onPress={() => {
          navigation.navigate('Signup');
        }}
      />
    </Conatiner>
  );
};

export default Signin;