Я использовал временные данные из tempdata. js в приложение. js, но получаю сообщение об ошибке. Пожалуйста, см. Я новичок в реагировании на родной язык и следую руководству. Итак, это простое приложение с задачами. Я пытаюсь использовать временные данные и не могу этого сделать. Пожалуйста помоги. Я следую инструкциям, но все равно получаю сообщение об ошибке. Я использую expo cl
export default tempData = [
{
name: "Plan a trip",
color: "#24A6D9",
todos: [
{
titile: "Book Flight",
completed: false
},
{
titile: "Passport Check",
completed: true
},
{
titile: "Reserve Hotel Room",
completed: true
},
{
titile: "Pack Luggage",
completed: false
}
]
},
{
name: "Errands",
color: "#8022D9",
todos: [
{
titile: "Buy Milk",
completed: false
},
{
titile: "Plan weekend camping trip",
completed: true
},
{
titile: "Run 2 miles",
completed: true
},
{
titile: "Make a Video",
completed: true
}
]
},
{
name: "Birthday Party",
color: "#595BD9",
todos: [
{
titile: "Get Balloons",
completed: false
},
{
titile: "Send Invitations",
completed: true
},
{
titile: "Make Dinner Reservations",
completed: true
}
]
}
];
Код в приложении. js
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, FlatList } from 'react-native';
import {AntDesign} from '@expo/vector-icons';
import tempData from './tempData';
export default function App() {
return (
<View style={styles.container}>
<View style={{ flexDirection: "row" }}>
<View style={styles.divider} />
<Text style={styles.title}>
Todo <Text style={{ fontWeight: "300", color: "#24A6D9" }}>Listsss</Text>
</Text>
<View style={styles.divider} />
<StatusBar style="auto" />
</View>
<View style={{marginVertical: 48}}>
<TouchableOpacity style={styles.addList}>
<AntDesign name="plus" size={16} color={"#24A6D9"} />
</TouchableOpacity>
<Text style={styles.add}>Add List</Text>
</View>
<View style={{height: 275, paddingLeft: 32}}>
<div>
<FlatList
data={tempData}
keyExtractor={item => item.name}
horizontal={true}
showsHorizontalScrollIndicator={false}
renderItem={({ item }) => (
<View>
<text>{item.name}</text>
</View>
)}
/>
</div>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
divider: {
backgroundColor: "#A7CBD9",
height: 1,
flex: 1,
alignSelf: "center"
},
title: {
fontSize: 38,
fontWeight: "800",
color: "#2D3436",
paddingHorizontal: 64
},
addList: {
borderWidth: 2,
borderColor: "#A7CBD9",
borderRadius: 4,
padding: 16,
alignItems: "center",
justifyContent: "center"
},
add: {
color: "#24A6D9",
fontWeight: "600",
fontSize: 14,
marginTop: 8
}
});
ОШИБКА: введите описание изображения здесь