интерактивные элементы списка в React Native

Question

У меня есть плоский список, который отображает список элементов, я хотел бы сделать каждый элемент кликабельным. Моя функция рендеринга выглядит так, и она работает без каких-либо проблем, за исключением того, что она не активируется

  render() {
    return (
      <FlatList
        data={formatData(data, numColumns)}
        style={styles.container}
        renderItem={this.renderItem}
        numColumns={numColumns}
      />

    );
  }

Я пытался сделать что-то похожее на this , но это дает мне ошибка, есть идеи, что случилось с моим кодом?

      <FlatList
        data={formatData(data, numColumns)}
        style={styles.container}
        renderItem={({this.renderItem})  => (
        <TouchableHighlight
        onPress={() => console.log("hello")}>
           </TouchableHighlight>
        )}
        numColumns={numColumns}
      />

Answer 1

Сначала вам нужно импортировать Touchable Opacity и полученную ошибку, убедитесь, что data, который вы передаете в flatlist, является массивом. Поэтому проверьте это:

<FlatList
data={formatData(data, numColumns)} // this should be an array , or array of objects
renderItem={({item ,index}) => (
        <TouchableOpacity 
          onPress={() => console.log("hello")}
        >
        <Text>Hi</Text>
        </TouchableOpacity>

/>

Надеюсь, что все ясно

Answer 2

Это то, как вы можете выполнять итерации внутри FlatList.

Работать в реальном времени https://snack.expo.io/@akhtarvahid / flatlist-simple

<FlatList
      data={formatData(data, numColumns)}
      style={styles.container}
      renderItem={({item ,index}) => (
        <TouchableOpacity 
          key={index.toString()} 
          onPress={() => console.log('Clicked item')}>
          <Text>{'Hello'}</Text>
        </TouchableOpacity>
      )}
      numColumns={numColumns}
      keyExtractor={item=>item.id}
    />

Answer 3

Вы можете сделать так:

renderItem с TouchableOpacity. Убедитесь, что вы импортировали его из оригинальной версии.

import { TouchableOpacity } from "react-native";
import Icon from 'react-native-vector-icons/FontAwesome5';
...
...

render() {
  return (
    <FlatList
      data={formatData(data, numColumns)}
      style={styles.container}
      renderItem={({item ,index}) => (
        <TouchableOpacity 
          key={index.toString()} 
          onPress={() => console.log("clicked")}
        >
          <Icon name={item} color="red"/>
        </TouchableOpacity>
      )}
      numColumns={numColumns}
      key={numColumns.toString()} // if you want to use dynamic numColumns then you have to use key props
    />
  );
}