React native - Flatlist onPress 返回所有数据集，而不仅仅是选定的数据集

Question

我正在尝试使用 Flatlist 组件来显示一些寄存器和 select 一些多个寄存器。

<FlatList
            horizontal
            bounces={false}
            key={ingredientList.id}
            data={ingredientList}
            renderItem={({ item }) => (
                <Card key={item.id} onPress={selectedIngredient(item)}>
                  <Text key={item.title} style={styles.titleText}>{item.name}</Text>
                  <ImageBackground key={item.illustration} source={item.illustration} style={styles.cardImage}></ImageBackground>
                </Card>
            )
            }
            keyExtractor={(item) => item.index}
          />

function selectedIngredient(item) {
    console.log('selecionado: ' + item.name)  
  }

我怎样才能只获得我select编辑的卡的详细信息？

这就是“成分列表”return:

Array [
  Object {
    "id": 8,
    "name": "leite condensado",
  },
  Object {
    "id": 9,
    "name": "creme de leite",
  },

Answer 1

点击事件可以使用TouchableOpacity。

快照：

以下是如何实施它的工作示例：

import React, { useState } from 'react';
import {
  Text,
  View,
  StyleSheet,
  FlatList,
  TouchableOpacity,
} from 'react-native';
import Constants from 'expo-constants';

// You can import from local files

// or any pure javascript modules available in npm

const ingredientList = [
  {
    id: 1,
    name: 'item1',
  },
  {
    id: 2,
    name: 'item 2',
  },
  {
    id: 3,
    name: 'item 3',
  },
  {
    id: 8,
    name: 'item 4',
  },
  {
    id: 4,
    name: 'item 5',
  },
  {
    id: 5,
    name: 'item 6',
  },
];

export default function App() {
  const [selectedItem, setSelectedItem] = useState(null);
  const selectedIngredient = (item) => {
    console.log('selecionado: ' + item.name);
    setSelectedItem(item);
  };
  return (
    <View style={styles.container}>
      <FlatList
        style={styles.flatlist}
        horizontal
        bounces={false}
        key={ingredientList.id}
        data={ingredientList}
        renderItem={({ item }) => (
          <TouchableOpacity
            style={styles.flatListItem}
            key={item.id}
            onPress={() => selectedIngredient(item)}>
            <Text>{item.name}</Text>
          </TouchableOpacity>
        )}
        keyExtractor={(item) => item.index}
      />

      {selectedItem ? (
        <View style={styles.selectedTextView}>
          <Text style={styles.selectedText}>{`${selectedItem.name} selected`}</Text>
        </View>
      ) : (
        <View style={styles.selectedTextView}>
          <Text style={styles.selectedText}>{`Nothing selected`}</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  flatListItem: {
    width: 100,
    height: 100,
    backgroundColor: 'white',
    margin: 5,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
  },
  selectedTextView: {
    flex: 1,
    backgroundColor: 'white',
    margin: 5,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    fontSize: 20
  },
  selectedText: {
    fontSize: 30
  },
});

工作演示：Expo Snack

Answer 2

试试这个 const selectedIngredient = (item) => { console.log(item); } 和 <Card key={item.id} onPress={() => selectedIngredient(item)}>

React native - Flatlist onPress 返回所有数据集，而不仅仅是选定的数据集

React native - Flatlist onPress is returning all the dataset not only the one selected

react-native

react-native-flatlist