Сделайте приложение ToDo List с помощью React Native Expo для устройств IOS и Android

Операция CRUD с использованием React Native Expo

Здравствуйте, разработчики React Native .. !!

Вы часто задаетесь вопросом, как создать приложение, которое следует всем операциям CRUD, то есть созданию, чтению, обновлению, удалению. Очень важно создать приложение, которое следует операции CRUD. Потому что все приложение следует этим правилам CRUD. Итак, давайте создадим мобильное приложение на React Native Expo, которое отслеживает все операции CRUD. Займите свое место, выпейте чашку кофе и приступим к работе.

Настройка и установка

1. Создайте каталог и перейдите к нему
2. Откройте терминал или командную строку в этом каталоге и выполните команду: expo init ToDo
3. Выберите пустой шаблон и продолжите загрузку
4. Перейдите в папку ToDo
5. Установите один пакет с помощью команды: npm install response-native-swipe-list-view
6. Установите другой пакет с помощью команды: npm install native-base @ 2.13.0
7. Установите другой пакет с помощью команды: npm install uuid-random

После завершения всех вышеперечисленных шагов мы закончили монтажную часть. Теперь откройте этот проект в своем любимом текстовом редакторе и начните кодировать.

Код списка дел в React Native Expo

Создайте файл и назовите его «ToDoList.js» в родительском каталоге.

ToDoList.js

import React, { useContext, useState } from 'react'
import { TodosContext } from './App'
import { SwipeListView } from 'react-native-swipe-list-view';
import { Header, Item, Input } from 'native-base';
import { StyleSheet, TouchableOpacity, View, Text, Button } from 'react-native';
import uuid from 'uuid-random';
export default function ToDoList() {
    // receive state and dispatch from App.js
    const {state, dispatch} = useContext(TodosContext); 
    const [todoText, setTodoText] = useState("")
    const [editMode, setEditMode] = useState(false)    
    const [editTodo, setEditTodo] = useState(null)    
    const buttonTitle = editMode ? "Edit" : "Add";
const handleSubmit = () =>{
        if(editMode){            
            dispatch({type: 'edit', payload:{...editTodo,text:todoText}})
            setEditMode(false)
            setEditTodo(null)
        }
        else{
            const newToDo = {id: uuid(), text: todoText};
            dispatch({type: 'add', payload: newToDo})
        }              
        setTodoText('') // to clear field after adding     
    }
const renderItem = data => (
        <View style={styles.rowFront}>
            <Text>{data.item.text}</Text>
        </View>
    );
const renderHiddenItem = (data, rowMap) => (
        <View style={styles.rowBack}>
            <TouchableOpacity onPress={() => editRow(data.item, rowMap)}>
                <Text>Edit</Text>
            </TouchableOpacity>  
            <TouchableOpacity
                style={[styles.backRightBtn]}
                onPress={() => deleteRow(data.item)}                
            >
                <Text style={{color: '#FFF'}}>Delete</Text>
            </TouchableOpacity>
        </View>
    );
const deleteRow = (todo) => {
        dispatch({type:'delete',payload:todo});
    };
const editRow = (todo,rowMap) => {        
        setTodoText(todo.text)
        setEditMode(true)
        setEditTodo(todo)
        if (rowMap[todo.id]) {
            rowMap[todo.id].closeRow();
        }        
    };
return (
        <View> 
            <Header searchBar>
                <Item>                
                    <Input 
                        placeholder="Enter Todo" 
                        onChangeText={text => setTodoText(text)} 
                        value={todoText} 
                    />                
                </Item>
                <Button transparent onPress={handleSubmit} title={buttonTitle} />
                                     
            </Header>
<SwipeListView
                data={state.todos}
                renderItem={renderItem}
                renderHiddenItem={renderHiddenItem}
                leftOpenValue={75}
                rightOpenValue={-75}
            />          
        </View>
    );
}
const styles = StyleSheet.create({
    rowFront: {
        alignItems: 'center',
        backgroundColor: '#FFF',
        borderBottomWidth: 0.25,
        justifyContent: 'center',
        height: 50,
    },
    rowBack: {
        alignItems: 'center',
        backgroundColor: '#DDD',
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'space-between',
        paddingLeft: 15,
    },
    backRightBtn: {
        alignItems: 'center',
        bottom: 0,
        justifyContent: 'center',
        position: 'absolute',
        top: 0,
        width: 75,
        backgroundColor: 'red',
        right: 0
    }
});

Сначала мы импортируем все необходимые зависимости из библиотеки javascript. После этого в функции ToDoList мы используем концепцию перехватчиков. Чтобы добавить ToDo и отредактировать ToDo, мы использовали крючок. Потому что это меняет состояние. Он переходит из исходного состояния в текущее состояние (то, что мы меняем).

Мы использовали то же пространство ввода, что и редактирование, и добавили задачу. Итак, в стрелочной функции handleSubmit мы установили два условия. Во-первых, если состояние находится в режиме редактирования, взять исходное состояние и заменить его текущим состоянием. Другой - если состояние находится в режиме добавления, что означает, что пользователь затем добавляет задачу, назначает задачу с новым идентификатором и добавляет задачу.

Мы делаем функцию редактирования и удаления с возможностью прокрутки. Эти предметы скрыты. Чтобы отобразить это, мы использовали функцию стрелки, а для части пользовательского интерфейса мы использовали некоторые стили. Чтобы отобразить и элементы todo, мы использовали функцию стрелки и возвращали их в текстовое поле с некоторым стилем.

То же самое и со стрелками удаления и редактирования, мы связали их с редуктором в App.js, который обрабатывает состояние и отображает текущее состояние.

Мы выбираем простой пользовательский интерфейс и, следовательно, в разделе пользовательского интерфейса в строке поиска заголовка устанавливаем поле ввода. Справа от этого мы устанавливаем кнопку, которая будет меняться соответствующим образом: если пользователь что-то редактирует, текст кнопки будет редактироваться, а если пользователь что-то добавляет, то текст кнопки покажет добавление.

Ниже мы добавили список задач. Этот список можно пролистывать, что означает, что вы можете пролистывать их влево или вправо. Когда вы проведете пальцем влево, вы увидите кнопку удаления, а когда проведете по списку вправо, вы увидите кнопку редактирования.

Остальное - это укладка. Вы можете изменить их в соответствии с вашей визуализацией.

App.js

import React, { useReducer } from 'react';
import ToDoList from './ToDoList';
const todosInitialState = { 
  todos:[{ id:'1', text: "finishing writing hooks chapter"},
    { id:'2', text: "play with kids"},
    { id:'3', text: "read books"}
  ]
};
export const TodosContext = React.createContext()
export default function App() {
const [state, dispatch] = useReducer(todosReducer,todosInitialState)
return (
    <TodosContext.Provider value={{state,dispatch}}>      
      <ToDoList />
    </TodosContext.Provider>    
  )
}
function todosReducer(state, action){ 
  switch(action.type){ 
    case 'add':      
      // add new todo onto array
      const addedToDos = [...state.todos,action.payload]
      // spread our state and assign todos
      return {...state,todos:addedToDos} 
    case 'edit':   
      const updatedToDo = {...action.payload} 
      const updatedToDoIndex = state.todos.findIndex(t => t.id === action.payload.id)
      const updatedToDos = [
        ...state.todos.slice(0,updatedToDoIndex),
        updatedToDo,
        ...state.todos.slice(updatedToDoIndex + 1)
      ];
      return {...state, todos: updatedToDos}      
    case 'delete':
      const filteredTodoState = state.todos.filter( todo => todo.id !== action.payload.id)
      return {...state, todos: filteredTodoState}
    default:
      return todosInitialState
  }
}

Импортируйте «ToDoList.js» в файл App.js. Мы устанавливаем начальные задачи для тестирования. Вы можете удалить его или отредактировать. После этого мы отправляем Reducer в основную функцию, поскольку Reducer обрабатывает глобальное изменение состояния приложения. Мы устанавливаем начальное состояние как todosReducer.

Теперь, возвращая функцию App, мы только что вернули ToDoList, который находится внутри тега контекста. React Context позволяет нам обмениваться значениями с любыми компонентами в дереве компонентов, которые запрашивают эти значения. И поставщик предоставляет значение дочернему компоненту.

В функцию todosReducer добавлено четыре кейса. Мы добавляем кейс «добавить» и создаем новый массив с существующими задачами (оператор распространения «…») и добавляем к нему newToDo. Здесь мы не меняем состояние вместо этого, мы возвращаем новое. Для редактирования мы сначала находим индекс элемента, а затем создаем новый массив для обновленного.

Теперь запустите приложение expo в терминале с помощью команды: npm start

Отсканируйте QR-код со своих устройств. Этот список Todo будет работать как на устройствах Android, так и на iOS. Посмотрите проект в действии. Вы увидите что-то подобное.

Если у вас возникнут какие-либо трудности, дайте мне знать в разделе комментариев. Код этого проекта на Github находится здесь.

Спасибо за чтение! Если эта статья вам полезна, хлопайте в ладоши, пока у вас не потечет кровь.