Как настроить FlatList?
Сделал Todo App, и мне для рендеринга списка todo надо использовать FlatList, но никак не могу понять как мне его настроить:
import React, {useState} from 'react'
import { StyleSheet, Text, View, TextInput, Button, SafeAreaView, Platform, StatusBar, Alert, ScrollView } from 'react-native'
import {Header} from './src/Header'
export default function App() {
const [todos, setTodos] = useState([])
const [value,setValue] = useState('')
const addTodo = (title) => {
setTodos(prev => [
{
id: Date.now().toString(),
title
}, ...prev
])
}
const pressHandler = () => {
if(value.trim()){
addTodo(value)
setValue('')
} else {
Alert.alert("Текст не может быть пустым!")
}
}
//TODO: Сделать FlatList вместо ScrollView
return (
<SafeAreaView style={styles.statusbar}>
<Header/>
<View style = {styles.container}>
<TextInput style={styles.input} placeholder='Введите текст...'
onChangeText={setValue}
value={value}
/>
<Button title="Добавить"
onPress = {pressHandler}
/>
</View>
<ScrollView> // <-- вот то самое место
<View style={styles.todolist}>
{todos.map(todo => {
let date = new Date().getDate()
let month = new Date().getMonth() + 1
let year = new Date().getFullYear()
return (
<View style={styles.todo} key={todo.id}>
<Text style={styles.listtodo}>{todo.title}</Text>
<Text style={styles.date}>{date + '.' + month + '.' + year}</Text>
</View>
)
})}
</View>
</ScrollView>
</SafeAreaView>
)
}