Question

我正在使用打字稿进行本机反应。

如何在界面中通过Navigation，下面的代码片段是Functional组件或class组件。 Reach.FC表示什么？

interface HomeScreenProps {}

export const HomeScreen: React.FC<HomeScreenProps> = ({}) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Home!</Text>
  </View>
)

Answer 1

您可以使用@react-navigation/native和@react-navigation/stack提供的类型；

import { RouteProp } from '@react-navigation/native';
import { StackNavigationProp } from '@react-navigation/stack';

type RootParams = {
  Home: undefined;
};

type HomeScreenRouteProps = RouteProp<RootParams, 'Home'>;

type HomeScreenNavigationProps = StackNavigationProp<
  RootParams,
  'Home'
>;

interface HomeScreenProps = {
  route: HomeScreenRouteProps;
  navigation: HomeScreenNavigationProps;
};

export const HomeScreen: React.FC<HomeScreenProps> = ({ navigate, route }) => (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Home!</Text>
  </View>
)

下面的如何传递道具和导航来响应本机代码

1 个答案: