React Native 类型“FC< Props>”不能分配给类型“ScreenComponentType&lt;ParamListBase,“Home”&gt;”|未定义'

4xy9mtcn  于 2023-06-06  发布在  React
关注(0)|答案(1)|浏览(220)

我有一些问题,想知道如何在React native中使用React.FC解决这个问题。
我有一个BottomNavigator.tsx

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import HomeScreen from "../screens/Home";
import ScoreboardScreen from "../screens/Scoreboard";
import AddWaterScreen from "../screens/AddWater";
import BottomTab from "./BottomTab";
import { DRINKER } from "../constants";

const { Navigator, Screen } = createBottomTabNavigator();
const BottomTabNavigator = () => {
  return (
    <Navigator screenOptions={{ headerShown: false }} tabBar={BottomTab}>
      <Screen
        name="Home"
        component={HomeScreen}
        initialParams={{ id: DRINKER.id, name: DRINKER.name }}
      />
      <Screen name="AddWater" component={AddWaterScreen} />
      <Screen name="Scoreboard" component={ScoreboardScreen} />
    </Navigator>
  );
};
export default BottomTabNavigator;

但是我在component={HomeScreen}处得到这个错误

Type 'FunctionComponent<Props>' is not assignable to type 'FunctionComponent<{}>'.
    Types of parameters 'props' and 'props' are incompatible.
      Type '{}' is not assignable to type 'Props'.

这是我的HomeScreen组件

import React, { useEffect } from "react";
import {
  Text,
  TouchableOpacity,
  StyleSheet,
  SafeAreaView,
  TouchableHighlight,
} from "react-native";
import { useDispatch } from "react-redux";
import { hydrateyActions } from "../reducers/hydratey";
import { Drinker } from "../types";

type Props = {
  id: string;
  name: string;
};

export const HomeScreen: React.FC<Props> = (props: Drinker) => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(hydrateyActions.getDrinker);
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.primaryHeader}>My Intake {props.name}</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    backgroundColor: "#323235CC",
  },
  primaryHeader: {
    fontSize: 40,
    fontWeight: "bold",
    textAlign: "justify",
    marginTop: "10%",
    marginHorizontal: "5%",
  },
  secondaryHeader: {
    fontSize: 12,
  },
});

export default HomeScreen;

我该如何解决这个问题?

f0brbegy

f0brbegy1#

我通过将component={HomeScreen}更改为component={() => <HomeScreen id={DRINKER.id} name={DRINKER.name} />}解决了这个问题

相关问题