Typescript StackNavigationProps og Screen-props i react-navigation v5

Hva er den beste måten å definere typen for skjermens navigation-prop på, når skjermen er i en annen fil enn ruteren? La oss si at jeg har én fil, der jeg definerer ruter:

//Router.tsx

type RootStackParamList = {
  Home: undefined;
  Profile: undefined;
}

const Stack = createStackNavigator<RootStackParamList>();

// Component rendering navigator
const Router = () => {
   .
   .
   .
}

Da har jeg den separate filen for skjermen:

// Home.tsx


// here has to be the same RootStackParamList
// that we've already defined in Router.tsx
type = HomeScreenNavigationProp = StackNavigationProp<
  RootStackParamList,
  "Home"
>;

type Props: {
  navigation: HomeScreenNavigationProp
}


const Home = ({navigation}: Props) => {
  .
  .
  .
}

Må jeg kopiere RootStackParamList om og om igjen til hver skjerm, eller lage noe som en types.ts-fil og importere det derfra? Finnes det en bedre måte å håndtere det på? Jeg bruker navigation nesten i hver komponent.

Svar #1

Du kan prøve dette:

type RootStackComponent<RouteName extends keyof RootStackParamList> = React.FC<{
  navigation: StackNavigationProp<RootStackParamList, RouteName>,
  route: RouteProp<RootStackParamList, RouteName>
}>

const Home: RootStackComponent<'Home'> = ({ navigation, route }) => {}

Svar #2

Først definer typen din createStackNavigator slik:

export type RootStackParamList = {
     Home: undefined;
     Register: undefined;
     Login: undefined;
};
const Stack = createStackNavigator<RootStackParamList>();

Gå deretter til Home.tsx-komponenten og legg til denne linjen:

type Props = StackScreenProps<RootStackParamList, 'Home'>;

const Home = ({navigation, route}: Props) => {
 .
 .
 . 
}

Referanse: https://reactnavigation.org/docs/typescript/

Relaterte artikler