Создание простого приложения Todo на React-Native

React Native позволяет создавать мобильные приложения, используя только JavaScript. Он использует тот же дизайн, что и React, что позволяет вам составлять богатый мобильный пользовательский интерфейс из декларативных компонентов.

React Native использует те же фундаментальные строительные блоки пользовательского интерфейса, что и обычные приложения для iOS и Android. Вы просто соединяете эти строительные блоки, используя JavaScript и React.

Для начала нам потребуется установить в нашей системе следующее.

• Node.js
• НПМ
• Телефон или эмулятор: Xcode для MAC или Geny-motion для Android

Настройка

Мы будем использовать приложение Create-react-native-app, так как его очень легко настроить.

Откройте свой Терминал (утилита командной строки), введите:

npm install -g create-react-native-app

Приведенная выше команда устанавливает приложение create-react-native-app глобально на ваш компьютер.

Мы будем использовать Expo для быстрой отладки. Подойдите к своему терминалу и введите:

npm install -g expo

Теперь у нас все настроено. Пора создавать наше первое мобильное приложение.

В желаемом каталоге выполните следующую команду в своем терминале

create-react-native-app todo
cd todo

Теперь у нас настроено наше приложение todo. Откройте приложение todo в своем любимом текстовом редакторе.

Введите команду ниже, чтобы запустить ваше приложение. Я буду использовать встроенный терминал VS-code

npm start

Вы увидите что-то вроде этого

Если на вашем телефоне установлено приложение expo, вам следует открыть приложение expo на своем телефоне и отсканировать QR-код. Это загрузит приложение на ваш телефон. Если нет, вы можете нажать a в приглашении для открытия в эмуляторе Android или i для открытия в эмуляторе IOS. Мы будем отлаживать эмулятор IOS, поэтому я нажимаю в командной строке.

Это открывается, и у нас есть что-то вроде этого

Теперь у нас запущено наше приложение. Мы будем использовать native-base и moment.

NativeBase - фреймворк для разработки мобильных приложений; создает слой поверх React Native, который предоставляет вам базовый набор компонентов для разработки мобильных приложений, который помогает вам разрабатывать приложения мирового класса на нативных платформах.

Момент анализирует, проверяет, изменяет и отображает дату и время в JavaScript.

В вашем терминале введите следующее, чтобы установить его

npm i native-base moment --save

Нам нужно добавить в наш проект пакеты native-base и moment. Чтобы добавить пакет в свой проект, сделайте следующее

import { Container, Header, Title, Content, Icon, button, Card, CardItem, Text, Body, Left, Right, IconNB, Footer, } from "native-base";
import moment from 'moment';

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

this.state = {
text: '',
data: [
'Linux', 'Mazino', 'Karosi', 'IK'
]}

Нам потребуется создать две функции: одну для добавления данных, а другую - для удаления данных.

Добавить функцию данных

add = (text) => {
let notEmpty = text.trim().length > 0;
if (notEmpty) {
this.setState(
   prevState => {
   let { data } = prevState;
   return {
       data: data.concat(text),
        text: ""
     };
  });
 }
}

Функция удаления данных

remove = (i) => {
 this.setState(
   prevState => {
      let data = prevState.data.slice();
      data.splice(i, 1);
      return { data };
  });
}

Нам также нужно будет создать еще одну функцию, которая запускает и предупреждает

showForm = () => {
     AlertIOS.prompt(   
         'Enter  Text',      
          null,     
          text =>  this.add(text)    );  
 }

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

<FlatList
   data={this.state.data}
   renderItem={({ item, index }) =>
   <Card key={index}>
     <CardItem key={index} style={{ height: 50 }}>
       <Body>
          <Text >
             {item}
          </Text>
       </Body>
       <Right>
        <TouchableOpacity 
          style={{ alignItems: 'center', 
          justifyContent: 'center',
          padding: 5,
          borderRadius: 5,
          borderColor: '#32CD32' }}
          onPress={() => this.remove(index)}>
           <FontAwesome name="minus" size={10} color='#32CD32' />
         </TouchableOpacity >
      </Right>
  </CardItem>
 </Card>
}
 keyExtractor={item => item.toString()}
/>

Мы хотели бы импортировать знаки + и -. Мы можем сделать это, импортировав их из векторных иконок экспо, как показано ниже.

import { FontAwesome } from '@expo/vector-icons'

Теперь у нас есть готовое и полностью работающее приложение.

Вы можете добавить новые данные, нажав кнопку.

если вы хотите создать свое приложение для производства, вы можете следовать этому руководству

Https://docs.expo.io/versions/latest/distribution/building-standalone-apps

Вы можете клонировать или скачать репозиторий по адресу https://github.com/linux08/react_native_todoApp