Здравствуйте, начинающие кодеры! Готовы заняться веселой и продуктивной разработкой приложений? Отлично, потому что сегодня мы погружаемся в сферу React Native, чтобы создать супер-полезное и ультра-персонализированное приложение ToDo List. Личный помощник, живущий у вас в кармане, всегда готов напомнить о текущих задачах. Как это круто?

А вишенка сверху? Вы будете тем, кто его создаст!

О, и прежде чем мы начнем, не забудьте проверить некоторые из моих замечательных приложений в App Store! Бесстыдная самореклама, да? Давайте начнем!

Итак, без лишних слов, давайте погрузимся в удивительный мир React Native.

Шаг 1. Настройте свою среду

Прежде чем мы начнем разбрасывать код, нам нужно подготовить нашу среду разработки. Нам понадобится Node.js, среда выполнения JavaScript, установленная на нашем компьютере. Просто зайдите на сайт Node.js и загрузите последнюю версию LTS.

Мы также собираемся использовать Expo CLI, инструмент, который поможет разработчикам без проблем запустить новый проект. Установите его с помощью npm (диспетчер пакетов Node, который поставляется в комплекте с Node.js), запустив его в своем терминале:

npm install -g expo-cli

Шаг 2: Создайте новый проект React Native

Теперь, когда интерфейс командной строки Expo запущен, давайте создадим наш проект. Перейдите в папку, в которой вы хотите разместить свой проект, и введите это в своем терминале:

expo init ToDoList

При появлении запроса выберите пустой шаблон.

Шаг 3: Загрузите свое приложение!

Перейдите в папку нового проекта с помощью cd ToDoList и запустите приложение, введя expo start. Эта команда запускает локальный сервер, на котором будет работать ваше приложение. Вы увидите всплывающий QR-код в вашем терминале.

Чтобы просмотреть приложение на своем телефоне, загрузите приложение Expo из магазина приложений вашего телефона и отсканируйте QR-код с помощью приложения Expo. И вуаля! Теперь вы можете увидеть свое приложение на своем телефоне.

Шаг 4: Создание экрана ToDo

Хорошо! Теперь, когда мы настроили наше приложение, пришло время создать новый экран для нашего списка дел. Давайте создадим новый файл в каталоге вашего проекта с именем ToDoScreen.js и добавим в него код:

import React from 'react';
import { Text, View } from 'react-native';

const ToDoScreen = () => {
  return (
    <View>
      <Text>Welcome to the ToDo List!</Text>
    </View>
  );
}

export default ToDoScreen;

Этот небольшой фрагмент создаст новый экран с простым приветственным сообщением.

Шаг 5: Навигация с помощью React Navigation

Чтобы перемещаться между разными экранами, нам нужно установить библиотеку под названием React Navigation. Запустите эти команды в своем терминале:

npm install @react-navigation/native
expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/stack

Теперь, когда у нас установлен React Navigation, мы можем настроить навигацию для нашего приложения.

Замените существующее содержимое App.js следующим:

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import ToDoScreen from './ToDoScreen';

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="ToDo">
        <Stack.Screen name="ToDo" component={ToDoScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Теперь запустите приложение с помощью expo start, и вы должны увидеть сообщение «Добро пожаловать в список дел!». сообщение.

Шаг 6: Актуальный список дел

У нас будет множество задач в качестве нашего списка дел. Мы будем отображать TextInput и Button для добавления новых задач. Давайте изменим компонент ToDoScreen:

import React, { useState } from 'react';
import { View, Text, FlatList, Button, TextInput } from 'react-native';

const ToDoScreen = () => {
  const [tasks, setTasks] = useState([
    { id: '1', task: 'Buy Milk' },
    { id: '2', task: 'Walk the Dog' },
  ]);
  const [input, setInput] = useState('');

  const addTask = () => {
    setTasks([...tasks, { id: Date.now().toString(), task: input }]);
    setInput('');
  };

  return (
    <View>
      <TextInput
        value={input}
        onChangeText={setInput}
        placeholder="Enter a task"
      />
      <Button title="Add Task" onPress={addTask} />
      <FlatList
        data={tasks}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <Text>{item.task}</Text>}
      />
    </View>
  );
}

export default ToDoScreen;

Поздравляем! Вы только что создали свое первое приложение ToDo List с помощью React Native! Как вы себя чувствуете? Взволнованный? Гордый?

Но помните, это только начало пути разработки вашего приложения. Вы можете продолжать улучшать это приложение, добавляя такие функции, как пометка задач как выполненных или установка сроков для ваших задач. Небо (и ваше воображение) - это предел!

Если вам понравился этот процесс (я уверен, что вам понравился), ознакомьтесь с другими превосходными приложениями прямо здесь или подпишитесь на меня в Твиттере. Они такие же привлекательные и даже более удобные.

Продолжайте программировать, продолжайте исследовать и, самое главное, продолжайте получать удовольствие!