我有一些问题,想知道如何在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;
我该如何解决这个问题?
1条答案
按热度按时间f0brbegy1#
我通过将
component={HomeScreen}
更改为component={() => <HomeScreen id={DRINKER.id} name={DRINKER.name} />}
解决了这个问题