如何使用FlatList在单独的TouchableOpacity中返回每个字符串

Question

我有一个字符串数组，需要在FlatList中返回。但我不确定如何才能实现这个想法。我能在这里做吗？｛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>
))}

通过这种方式，您可以分别呈现所有答案