Erstellen wir eine Todo-App mit React Native + Expo

In diesem Artikel erstellen wir eine Aufgaben-App und haben ein grundlegendes Layout mit Kopfzeile, Inhalt und innerhalb des Inhalts haben wir eine Liste von Aufgaben.

Verwandte Kurse:

Voller Inhalt:

Teil 1 - Grundlegendes Layout und Header-Komponente erstellen

Teil 2 - Artikelkomponente erstellen

Teil 3 - Erstellen Sie die AddTask-Komponente, um eine neue Aufgabe einzufügen

Teil 4 - Benachrichtigung bei Fehler

Teil 5 - Schließen Sie die Tastatur, wenn Sie von der Tastatur weg klicken

Teil 6 - Expo React Native Teil 6 - Element löschen

Teil 7 - Verwenden der flexBox zur Behebung des Problems außerhalb des Bildschirms.

return (
<View style={styles.container}>
...header...
<View style={styles.content}>
... input form ...
...list...
</View>
</View>
);

Dann kopieren wir die Aufgaben von der folgenden URL:

https://gist.github.com/delapuente/900160

const [tasks, setTasks] = useState([
{ task: "HTML I", id: "1" },
{ task: "CSS", id: "2" },
{ task: "Responsive design", id: "3" },
])

Als Nächstes fügen wir die FlatList hinzu, um die Daten „Aufgaben“ zu rendern und die Aufgabe in der Textkomponente aufzulisten.

<View style={styles.list}>
<FlatList
data={tasks}
renderItem={({ item }) => (
<Text>{item.task}</Text>
)}
/>
</View>

content: {
padding: 30
},
list: {
marginTop: 30,
}

Wir werden eine brandneue Komponente in einer anderen Datei für den
Header erstellen und es ist einfacher zu aktualisieren.

Wir werden einen neuen Ordner namens "Komponenten" erstellen.

Innerhalb von Header.js

import React from 'react'
import { StyleSheet, Text, View } from 'react-native';
const Header = () => {
return (
<View style={styles.header}>
<Text style={styles.title}>CKmobile tasks</Text>
</View>
)
}
export default Header
const styles = StyleSheet.create({
header: {
height: 80,
paddingTop: 30,
backgroundColor: 'blue'
},
title: {
textAlign: 'center',
color: '#fff',
fontSize: 20,
fontWeight: 'bold',
fontStyle: 'italic'
}
});

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, Text, View, FlatList, SafeAreaView } from 'react-native';
import Header from './components/Header';

Folge uns: