UI 小猫 - 列表组件 - 如何获取所选项目

Question

我正在使用UI Kitten UI工具包构建React-Native CLI应用程序。在我的渲染中，我有下面的列表。

<List
style={styles.listContainer}
data={providerTypes}
renderItem={renderItem}
keyExtractor={(item) => item.Id.toString()}
/>

我有这些方法用于列表项和 onPress 事件。

const renderItem = ({item, index}) => (
<ListItem
title={`${item.ServiceCategory}`}
description={`${item.ServiceType} `}
accessoryRight={renderItemIcon}
onPress={(item) => typeSelected(item)}
/>
);
const typeSelected = (item) => {
console.log('item: ', item);
console.log('item.Id: ', item.Id);
alert('You touched list item: ', item.Id);
};

当 typeSelected 方法被触发时，项。Id 为空，但 item 是一个包含如此多数据的巨大对象，但我在其中的任何地方都找不到我的项目数据？

我对小猫库很陌生，我根本不了解 TypeScript。我也没有在 RN 应用程序中使用 TypeScript，所以我正在努力弄清楚如何在这里使用它。

Answer 1

问题是你得到的是偶数而不是项目

当你这样做时

onPress={(item) => typeSelected(item)}

项目引用事件，而不是索引中的项目

您必须将其更改为

onPress={() => typeSelected(item)}

Answer 2

你可以简单地尝试

onChangeText={item => typeSelected(item)} 

或

onChange={item => typeSelected(item)} 

方法，因为来自 react-native-ui-kitten 的 ListItem 使用来自 react-native 平面列表组件的道具