React Native with TypeScript - 如何使用 @react-navigationnative 中的 useRoute 与 Typesc

使用React Native开发移动应用程序可以帮助开发人员在不同平台上构建高性能的原生应用。而使用TypeScript可以增强代码的可读性和可维护性。在React Native应用中，使用@react-navigation/native库可以方便地实现导航功能。本文将介绍如何在React Native中使用TypeScript与@react-navigation/native中的useRoute钩子函数，并提供相应的示例代码。

npm install @react-navigation/native

npm install @react-navigation/stack

tsx
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

tsx
import { useRoute } from '@react-navigation/native';

tsx
const MyComponent = () => {
  const route = useRoute();
  const { id, name } = route.params;
  return (
    
      ID: {id}
      Name: {name}
    
  );
};

tsx
import React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { useRoute } from '@react-navigation/native';
type MyComponentProps = {
  id: number;
  name: string;
};
const MyComponent = () => {
  const route = useRoute();
  const { id, name } = route.params as MyComponentProps;
  return (
    
      ID: {id}
      Name: {name}
    
  );
};
const Stack = createStackNavigator();
const App = () => {
  return (
    
      
                  name="Home"
          component={HomeScreen}
        />
                  name="Details"
          component={MyComponent}
        />
      
    
  );
};
export default App;