Автомобильная парковка Finder App UI клон № 1: Карта Вид | Реагировать на родной

Автор оригинала: Absekk.

Учебная серия Tutorial Parking App Parking Finder App Ui была вдохновлена Магазин локаторный шаблон приложения Это дает нам динамический, полностью закодированный стартовый комплект, написанный в реакции, на котором любой может использовать для создания собственного локатора магазина реагировать на собственное применение или инициировать свой собственный запуск.

В этом руководстве реплицирует реализации кодирования и дизайна из видеоурок на YouTube by Ract ui kit Для автомобильной парковки Finder App UI клон. Видеоурок доставляется с использованием кодирования скорости с быстрыми реализациями, которые могут быть сложными для любого разработчика для понимания. Следовательно, видеоурок не предназначен для начинающих, так как он не объясняет никаких деталей кода. Таким образом, для того, чтобы сделать вещи проще и более четко, этот учебник серии разбивает видео в разные разделы. Он также предоставляет пошаговое руководство по реализации каждого раздела UI APP. Это сделает все легче для всех, особенно новичков.

Обзор

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

Итак, давайте начнем !!

_ Обратите внимание, что в этом руководстве мы собираемся использовать EXPO в качестве инструмента развития реагирования нативный проект. Итак, во-первых, мы собираемся создать котельной реагировать нативное приложение с использованием клиента EXPO. _

Создание нативного проекта Starter Rect

В первую очередь, поскольку мы собираемся использовать EXPO в качестве двигателя развития, нам нужно установить его в нашу систему. Чтобы установить EXPO по всему миру в нашу систему, нам нужно сначала установить Manager Package (NPM). Затем нам нужно запустить следующую команду:

npm install -g expo

Теперь нам нужно создать котельной реагировать нативное приложение, используя EXPO. Чтобы сделать это, нам нужно выполнить следующую команду в желаемом каталоге проекта:

expo init \ // project name==\> carParking

После запуска вышеуказанной команды нас попросят выбрать шаблон для приложения BoaterPlate. Здесь мы собираемся выбрать ** Blank ** шаблон. Пустой шаблон предоставляет очень минимальный шаблон приложения, так как чистый, как пустой холст. Скриншот выбора приведен ниже:

Как мы видим, мы выбираем пустой шаблон и нажмите Enter. Затем нам нужно ввести название проекта и после этого, нативное приложение BoaterPlate Rect настроен на наш каталог.

Теперь нам нужно ввести каталог проекта, а затем запустить команду:

expo start

Затем мы получим следующее приложение для котельной на нашем экране эмулятора:

Как мы видим, у нас есть шаблон стартера работает в эмуляторе. Экран не настраивается с слишком многими стилями и дизайнами макета. Просто простой белый экран с текстом посередине.

Настройка файлов проекта и папок

Теперь в папке проекта нам нужно создать новый каталог с именем «экраны». В каталоге «./Screens/» нам нужно создать новый файл JavaScript называемый map.js. Общая структура папки проекта предусмотрена на скриншоте ниже:

Теперь нам нужно сделать map.js как оригинальный компонент нативного экрана. Для этого нам нужно скопировать код из следующего фрагмента кода и вставить в файл map.js:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Map extends React.Component {
  render(){
    return (
      
        Map
      
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Здесь мы импортировали Реагировать Компонент из пакета «React», чтобы настроить файл в качестве файла RACT. Мы импортировали некоторые необходимые компоненты из пакета реагирования. Тогда мы определили Класс назван Карта который простирается на Компонент модуль Реагировать составная часть. В Render () Функция, мы настроили голый минимальный шаблон, который имеет Вид Компонентная упаковка Текст составная часть. Затем мы определили некоторые стили, используя Stylesheet составная часть.

Теперь нам нужно импортировать Карта Компонентный экран в наш файл App.js. Для этого нам нужно добавить следующий код в наш файл App.js:

import Map from './screens/Map'

Теперь нам нужно заменить код внутри Render () Метод файла app.js с Карта Компонент, как показано в фрагменте кода ниже:

render(){
    return (
      
    );
  }

В результате мы получим тот же экран, что и ранее в эмуляторе.

Здесь мы можем удалить стили из файла app.js. Теперь мы собираемся работать только на файле map.js для экрана представления карты.

Читать далее…

Пост Rect Nource Car Parking Finder App UI клон № 1: Карта Просмотр появился в первую очередь на Крисс Отказ

Раскрытие

Этот пост включает в себя партнерские ссылки; Я могу получить компенсацию, если вы приобретете продукты или услуги из разных ссылок, представленных в этой статье.