Question

我遇到一个打字稿问题，即使用React Navigation结合一个包装有两个高阶组件（HOC）的组件来创建堆栈导航器。我正在使用compose将我的HOC串在一起，但是打字稿说返回的组件与堆栈导航器屏幕道具不兼容。这是我的代码：

import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
import { View, Button } from 'react-native';
import { compose } from 'recompose';
import { RouteProp } from '@react-navigation/native';

type RootStackParamList = {
  Home: IProps
};

type IProps = {
  message: string;
  user: string;
  navigation: StackNavigationProp<RootStackParamList, 'Home'>;
  route: RouteProp<RootStackParamList, 'Home'>
}

const Home = (props: IProps) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={() => alert(props.message)} title='Message' />
    </View>
  );
}
const withMessage = (Component: React.ComponentType<{ message: string }>) => <Component message='hello' />
const withUser = (Component: React.ComponentType<{ user: string }>) => <Component user='Joe' />

const homeWithMoreProps = compose<IProps, {}>(
  withMessage,
  withUser
)(Home);

const RootStack = createStackNavigator<RootStackParamList>();

<RootStack.Navigator initialRouteName='Home'>
  <RootStack.Screen name='Home' component={homeWithMoreProps} /> // <-- Error is here
</RootStack.Navigator>

使用“ @ react-navigation / stack”：“ ^ 5.0.0-alpha.58”

错误是：

Type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>' is missing the following properties from type 'Readonly<{ route: RouteProp<RootStackParamList, "Home">; navigation: any; }>': route, navigation

基本上告诉我homeWithMoreProps组件缺少导航和路线道具，但是根据我的IProps输入，它不是。我正在尝试遵循以下说明，但无济于事：https://reactnavigation.org/docs/en/next/typescript.html。

在堆栈导航器上反应导航打字稿错误

0 个答案: