react-native useNavigation 功能组件中的无效 Hook 调用

Question

我尝试在我的功能组件中使用 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>
  );
};

如何使用这个钩子或导航道具？

Answer 1

你需要在render中设置函数组件，而不是传递函数：

<FlatList
        contentContainerStyle={{ flexGrow: 1, paddingBottom: 25 }}
        scrollEnabled={true}
        data={transactions || searchTransactions}
        showsVerticalScrollIndicator={false}
        keyExtractor={item => `row-${item.id}`}
        renderItem={(props)=> <RenderItem {...props} />}
      />