如何解决React Native FlatList 错误:没有与此调用匹配的重载类型缺少以下属性
我是 React Native 的新手,正在尝试构建一个简单的聊天室应用程序。我想创建一个包含代表可用聊天室的元素的列表,但我终其一生都无法弄清楚为什么 FlatList
一直给我这个错误。我已经为 data
提供了一个 renderItem
道具和一个 FlatList
道具。我尝试将 renderItem
道具更改为不引用 const ChatRoom
的简单内容,但没有任何区别。
"No overload matches this call.
Overload 1 of 2,'(props: FlatListProps<unknown> | Readonly<FlatListProps<unknown>>): FlatList<unknown>',gave the following error.
Type '{ children: (string | { name: string; description: string; }[] | (({ item }: { item: any; }) => Element))[]; }' is missing the following properties from type 'Readonly<FlatListProps<unknown>>': data,renderItem\n Overload 2 of 2,'(props: FlatListProps<unknown>,context: any): FlatList<unknown>',renderItem","source": "ts","startLineNumber": 18,"startColumn": 6,"endLineNumber": 18,"endColumn": 14
const RoomSelectionScreen = props => {
const rooms = [
{ name: "Room num 1",description: "First room" },{ name: "Room num 2",description: "Second room" },{ name: "Room num 3",description: "Third room" }
];
const Item = ({ item }) => {
return <ChatRoom name={item.name}s description={item.description} />;
};
return <View>
<Text style={styles.text}>Room Selection</Text>
<FlatList>
data={rooms}
renderItem={Item}
</FlatList>
</View>;
};
const styles = StyleSheet.create({
text: {
fontSize: 30
}
});
export default RoomSelectionScreen;
const ChatRoom = props => {
return <View>
<Text style={styles.roomName}>{props.name}</Text>
<Text style={styles.roomDescription}>{props.description}</Text>
<Button
title="Go to room"
onPress={() => openChatRoom()}
/>
</View>;
};
function openChatRoom() {
}
const styles = StyleSheet.create({
roomName: {
fontSize: 30
},roomDescription: {
fontSize: 15
}
});
export default ChatRoom;
解决方法
执行此操作时,您当前正在运行没有其道具的 FlatList
<FlatList>
data={rooms}
renderItem={Item}
</FlatList>
解决方案:
<FlatList
data={rooms}
renderItem={Item}
/>
或
<FlatList
data={rooms}
renderItem={Item}>
</FlatList>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。