![](/img/trans.png)
[英]No overload matches this call. Overload 1 of 2, '(props: ViewProps | Readonly<ViewProps>): View', gave the following error. (React Native)
[英]React Native FlatList error: No overload matches this call. Type is missing the following properties
我是 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>', 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",
"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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.