Я пытаюсь сделать клон Instagram, но при использовании FlatList я получаю эту ошибку:
Ошибка: TypeError: undefined не является объектом (оценивается как _ref.item)
Я следовал этому учебнику на YouTube, и мой код в основном такой же, как и на видео, я думаю, что, вероятно, документы изменились из-за того, что видео было загружено 1 год назад.
Использование React Native Cli & android studio
import React, {Component} from "react";
import {FlatList} from "react-native";
import Post from "../presentation";
class PostFeed extends Component{
_renderPost({ item }) {
return <Post />;
}
_returnKey(item) {
return item.toString();
}
render() {
return (
<FlatList
data={[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]}
keyExtractor={this._returnKey}
renderItem={this._renderPost()}
/>
);
}
}
export default PostFeed;
Вот это InstaClone.js
import React, {Component} from "react";
import { View, Text, StyleSheet, Image, Dimensions, TouchableOpacity } from "react-native";
import config from "./config";
import { PostFeed } from './components/container';
class InstaClone extends Component {
render() {
return (
<View style={{ flex: 1, width: 100+"%", height: 100+"%"}}>
<View style={styles.tempNav}>
<Text>Instagram</Text>
</View>
<PostFeed/>
</View>
);
}
}
export default InstaClone;
const styles = StyleSheet.create({
tempNav: {
width:100+"%",
height: 56,
backgroundColor:"rgb(250,250,250)",
borderBottomColor:"rgb(233,233,233)",
borderBottomWidth: StyleSheet.hairlineWidth,
justifyContent: "center",
alignItems: "center"
},
userBar: {
width:100+"%",
height: config.styleConstants.rowHeight,
backgroundColor: "#fff",
flexDirection: "row",
paddingHorizontal: 10,
justifyContent: "space-between"
},
userPic: {
height:40,
width:40,
borderRadius:20
},
iconBar: {
height: config.styleConstants.rowHeight,
width: 100 + "%",
borderColor:"rgb(233,233,233)",
borderTopWidth: StyleSheet.hairlineWidth,
borderBottomWidth: StyleSheet.hairlineWidth,
flexDirection: "row"
},
icon: {
marginHorizontal: 5
},
})