Créons une application Todo avec React Native + Expo

Dans cet article, nous allons créer une application To Do, et nous aurons une mise en page de base avec en-tête, contenu et à l'intérieur du contenu, nous avons une liste de tâches.

Cours connexe:

Contenu complet:

Partie 1 - Créer une disposition de base et un composant d'en-tête

Partie 2 - Créer un composant d'élément

Partie 3 - Créer le composant AddTask pour insérer une nouvelle tâche

Partie 4 - Alerte en cas d'erreur

Partie 5 - Ignorez le clavier lorsque vous cliquez loin du clavier

Partie 6 - Expo React Native Partie 6 - Supprimer l'élément

Partie 7 - Utilisation de la flexBox pour résoudre le problème hors écran.

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

Ensuite, nous copions les tâches à partir de l'url suivante:

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

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

Ensuite, nous allons ajouter la FlatList pour rendre les données «tâches» et également lister la tâche à l'intérieur du composant Texte.

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

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

Nous allons créer un tout nouveau composant dans un fichier différent pour l'en-
tête et il est plus facile à mettre à jour.

Nous allons créer un nouveau dossier appelé «composants».

À l'intérieur de 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';

Suivez nous: