reactjs - react native : How to setup React Navigation types so I don't have to create NavigationProps on each component I use?

Question

所以现在我有一个包含我所有类型的 routes.tsx 文件。但是在我使用 useNavigation() 的屏幕上，我总是需要在该组件中为它创建一个类型。如何为我的路线正确设置全局类型，这样我就不必这样做了？

路线.tsx

export type AuthStackParamList = {
  Landing: undefined;
  GetStarted: undefined;
  VerifyOtp: { email: string };
  PrivacyPolicy: undefined;
  TermsOfService: undefined;
};

export type AppTabParamList = {
  HomeScreen: undefined;
  FriendsScreen: undefined;
  NotificationsScreen: undefined;
  SettingsScreen: undefined;
};

export type OnboardingStackParamList = {
  UsernameScreen: undefined;
};

export type HomeTabStackParamList = {
  Home: undefined;
};

export type FriendsTabStackParamList = {
  Friends: undefined;
  SearchUsers: undefined;
};

export type SettingsTabStackParamList = {
  Settings: undefined;
  EditName: { id: string; name: string };
  EditUsername: { id: string; username: string };
  DeleteAccount: undefined;
};

AuthStack.tsx

const AuthStack = createNativeStackNavigator<AuthStackParamList>();

export function AuthStackNavigator() {
  return (
    <AuthStack.Navigator
      initialRouteName="Landing"
      }}>
      <AuthStack.Screen
        name="Landing"
        component={LandingScreen}
        options={{ headerShown: false }}
      />
      <AuthStack.Screen
        name="GetStarted"
        component={GetStartedScreen}
        options={{ headerTitle: '' }}
      />
      <AuthStack.Screen
        name="VerifyOtp"
        component={VerifyOTPScreen}
        options={{ headerShown: false, gestureEnabled: false }}
      />
      <AuthStack.Screen
        name="TermsOfService"
        component={TermsOfServiceScreen}
        options={{ headerTitle: 'Terms of Service' }}
      />
      <AuthStack.Screen
        name="PrivacyPolicy"
        component={PrivacyPolicy}
        options={{ headerTitle: 'Privacy Policy' }}
      />
    </AuthStack.Navigator>
  );
}

GetStartedScreen.tsx

这是我想在需要使用 useNavigation 时避免做的事情

type GetStartedScreenNavigationProps = NativeStackNavigationProp<
  AuthStackParamList,
  'GetStarted'
>;

const GetStartedScreen = () => {
  const navigation = useNavigation<GetStartedScreenNavigationProps>();

Answer 1

您可以像这样在单独的文件中创建自定义 Hook :

export const useAuthStackNavigation = <K extends keyof AuthStackParamList>() =>
{
  return useNavigation<NativeStackNavigationProp<AuthStackParamList, K>>(); 
};

然后在你的屏幕上:

const GetStartedScreen = () => {
  const navigation = useAuthStackNavigation<'GetStarted'>();