我试图在我的功能组件中使用usenavigation钩子,但出现了此错误
我的主要组成部分如下:
const TransactionsList: React.FunctionComponent<ITransactionsListProps> = ({
transactions,
searchTransactions,
}) => {
return (
<Container>
<DateContainer>
<DateLabel text={I18n.t('currentAccount.dateToday')} />
</DateContainer>
<FlatList
contentContainerStyle={{ flexGrow: 1, paddingBottom: 25 }}
scrollEnabled={true}
data={transactions || searchTransactions}
showsVerticalScrollIndicator={false}
keyExtractor={item => `row-${item.id}`}
renderItem={RenderItem}
/>
</Container>
);
};
export default TransactionsList;
以及我尝试使用usenavigation的renderitem组件:
interface IFakeTransactions {
fisrstName: string;
lastName: string;
amount: string;
co2Cost: string;
type: string;
status: string;
id: string;
side: string;
}
const RenderItem: ListRenderItem<IFakeTransactions> = ({
item
}): JSX.Element => {
const navigation = useNavigation();
return (
<TouchableOpacity
onPress={() => {
navigation.navigate('TransactionDetails')
}}>
<TransactionItem
fisrstName={item.fisrstName}
lastName={item.lastName}
amount={item.amount}
co2Cost={item.co2Cost}
type={item.type}
status={item.status}
side={item.side}
/>
</TouchableOpacity>
);
};
我如何使用这个钩子或导航道具?
1条答案
按热度按时间gzszwxb41#
您需要在渲染中设置函数组件,而不是传递函数: