如何使用 FlatList return 单独的 TouchableOpacity 中的每个字符串？

Question

我有一个字符串数组，我需要在 FlatList 中 return。但我不确定如何实现这个想法。我可以在这里做吗？ {item.answers} 或者我应该重组我的 API 以使其按我需要的方式工作？这是我的代码：

const DATA = [
  {
    question:
      "In class, how oftern do you purposely encourage others around you?",
    answers: [
      "Bully: Use physical aggression to get my own way. Pick on others a lot",
      "Rude: Treats others without care. Mild put downs. Passive. Aggressive",
      "Doubting: Do not believe in others. Hard to see the good in others",
      "Encouraging: Support that instils courage and inner confidence in others",
      "People Pleasing: Saying nice things to others but for a selfish reason eg. to be liked more.",
      "Sarcastic: The nice things that you say are almost always fake or passive aggressive",
      "Manipulating: Try to get others to do what you want by telling them what they want to hear",
    ],
  },
];


const Item = ({ item, onPress, style }) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
    <Text style={styles.title}>{item.answers}</Text>
  </TouchableOpacity>
);

const QuizScreen = () => {
  // const [selectedId, setSelectedId] = useState(null);

  const renderItem = ({ item }) => {
   
    return (
      <Item
        item={item}
        onPress={() => {}}
        style={{ backgroundColor: Colors.primary }}
      />
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={DATA}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
      />
    </SafeAreaView>
  );
};

Answer 1

这可能有帮助

const Item = ({ item, onPress, style }) => {
  return item.answers.map((value,i) => (
  <TouchableOpacity onPress={onPress} style={[styles.item, style]}>
    <Text style={styles.title}>{value}</Text>
  </TouchableOpacity>
))}

这样您就可以单独呈现所有答案

如何使用 FlatList return 单独的 TouchableOpacity 中的每个字符串？

How to return each string in a separate TouchableOpacity with FlatList?

react-native

react-native-flatlist