React Native TypeScript导航按钮无响应问题求助：如何正确指定navigation参数类型？

Hey there! Let's break down how to fix both the type safety for your navigation prop and the non-functional navigation buttons.

First, you're right that adding proper TypeScript types is important for your project, but the navigation not working might also be tied to missing setup steps. Let's tackle both:

Step 1: Add Proper Navigation Types #

First, let's define the type for your root stack and apply it to your components. This will eliminate any type errors and make your code more maintainable.

1. Define your root stack parameter list
   At the top of your routes file (or a separate types file), add this type to describe your navigation routes:

   import { NativeStackNavigationProp } from '@react-navigation/native-stack';
   
   // Define the types for your routes and their parameters
   type RootStackParamList = {
     Login: undefined; // No parameters needed for Login screen
     Register: undefined; // No parameters needed for Register screen
   };
   
   // Create type aliases for easier reuse
   type LoginScreenNavigationProp = NativeStackNavigationProp<RootStackParamList, 'Login'>;
   type RegisterScreenNavigationProp = NativeStackNavigationProp<RootStackParamList, 'Register'>;
   

2. Apply types to your screen components
   Update your Login and Register components to use these types for the navigation prop:

   import { Button, Center, Text } from 'react-native'; // Adjust imports as needed
   
   function Login({ navigation }: { navigation: LoginScreenNavigationProp }) {
     return (
       <Center>
         <Text style={styles.text}>I'm a Login Screen</Text>
         <Button 
           title="go to register" 
           onPress={() => navigation.navigate("Register")} 
         />
       </Center>
     );
   }
   
   function Register({ navigation }: { navigation: RegisterScreenNavigationProp }) {
     return (
       <Center>
         <Text style={styles.text}>I'm a Register Screen</Text>
         <Button 
           title="go to Login" 
           onPress={() => navigation.navigate("Login")} 
         />
       </Center>
     );
   }
   

3. Update your Routes component
   Make sure your Stack Navigator uses the same root stack type to enforce type safety:

   import { createNativeStackNavigator } from '@react-navigation/native-stack';
   
   const Stack = createNativeStackNavigator<RootStackParamList>();
   
   export const Routes: React.FC = () => {
     return (
       <NavigationContainer>
         <Stack.Navigator initialRouteName="Login">
           <Stack.Screen name="Login" component={Login} />
           <Stack.Screen name="Register" component={Register} />
         </Stack.Navigator>
       </NavigationContainer>
     );
   };
   

   Note: I removed the RoutesProps since it wasn't defined in your code—if you do need props here, you can add them back, but they weren't necessary for basic navigation.

Step 2: Fix the Non-Functional Navigation Buttons #

If adding types didn't fix the navigation issue, let's check these common setup problems:

• Verify all dependencies are installed
  React Navigation requires additional dependencies beyond the core package. Run these commands to make sure you have everything:

  npm install @react-navigation/native @react-navigation/native-stack
  npm install react-native-screens react-native-safe-area-context
  

  For iOS, don't forget to run pod install in the ios directory after installing these packages.

• Check if your App component renders the Routes component
  Make sure your root App component is correctly rendering your Routes component:

  import { Routes } from './path-to-your-routes-file';
  
  export default function App() {
    return <Routes />;
  }
  

• Ensure no typos in route names
  Double-check that the name you pass to navigation.navigate() matches exactly with the name prop in Stack.Screen (case-sensitive!). In your code, "Login" and "Register" look correct, but it's always worth verifying.

After following these steps, your navigation should work as expected, and you'll have proper TypeScript type safety for your navigation props.

内容的提问来源于stack exchange，提问作者Rafael