UI小猫-列表组件-如何获取选中的item

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 方法被触发时，item.Id 为 null，但 item 是一个包含如此多数据的巨大对象，但我无法在其中找到我的项目数据？

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

Answer 1

你可以试试

onChangeText={item => typeSelected(item)}

或

onChange={item => typeSelected(item)}

方法因为来自 react-native-ui-kitten 的 ListItem 使用来自 react-native Flatlist 组件的道具

Answer 2

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

当你这样做时

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

项目指的是事件而不是索引中的项目

你必须把它改成

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

UI小猫-列表组件-如何获取选中的item

UI Kitten - List component - How to get selected item

user-interface

react-native

react-native-flatlist

react-native-ui-kitten