0

请！有人可以解释一下以下代码有什么问题吗？我正在尝试通过 ListItem

export const ListItem: ListRenderItem<IUser> = ({item}) => {
 

  return (
    <RNEListItem onPress={() => {}}>
      <Avatar source={{uri: item.picture.thumbnail}} rounded size="medium" />
      <RNEListItem.Content>
        <RNEListItem.Title>{`${item.name.first} ${item.name.last}`}</RNEListItem.Title>
        <RNEListItem.Subtitle>{item.email}</RNEListItem.Subtitle>
      </RNEListItem.Content>
      <RNEListItem.Chevron size={30} />
    </RNEListItem>
  );
};

到 FlatList 中的 renderItem 道具

return (
    <FlatList
      data={users}
      renderItem={ListItem}
      ItemSeparatorComponent={ListItemSeparator}
      keyExtractor={keyExtractor}
      showsVerticalScrollIndicator={false}
      ListFooterComponent={ListLoader}
      onEndReached={handleMore}
      onEndReachedThreshold={0.1}
      onRefresh={handleRefresh}
      refreshing={isRefreshing}
    />
  );

一切都很好。但是当我尝试使用钩子时

export const ListItem: ListRenderItem<IUser> = ({item}) => {
  const {navigate} = useNavigation<RootStackParamList>();

  const handlePress = useCallback(() => {
    console.log(item.login.uuid);
    navigate(ERootStackScreens.USER_SCREEN, {id: item.login.uuid});
  }, []);

  return (
    <RNEListItem onPress={() => {}}>
      <Avatar source={{uri: item.picture.thumbnail}} rounded size="medium" />
      <RNEListItem.Content>
        <RNEListItem.Title>{`${item.name.first} ${item.name.last}`}</RNEListItem.Title>
        <RNEListItem.Subtitle>{item.email}</RNEListItem.Subtitle>
      </RNEListItem.Content>
      <RNEListItem.Chevron size={30} />
    </RNEListItem>
  );
};

RN 回报

Hooks can only be called inside the body of a function component.

但是当我以这种方式更改 renderItem

return (
    <FlatList
      data={users}
      renderItem={()=>ListItem}
      ItemSeparatorComponent={ListItemSeparator}
      keyExtractor={keyExtractor}
      showsVerticalScrollIndicator={false}
      ListFooterComponent={ListLoader}
      onEndReached={handleMore}
      onEndReachedThreshold={0.1}
      onRefresh={handleRefresh}
      refreshing={isRefreshing}
    />
  );

一切都变得很好。但看起来文档中的类型不正确。因为根据他们的第一个例子应该可以正常工作

renderItem: ListRenderItem<ItemT> | null | undefined;


export type ListRenderItem<ItemT> = (info: ListRenderItemInfo<ItemT>) => React.ReactElement | null;
4

1 回答 1

0

您需要在功能组件中传递道具：

renderItem={(props)=><ListItem {...props} />}

于 2021-07-23T10:45:50.033 回答