Эта серия руководств по клонированию пользовательского интерфейса приложения Car Parking Finder была вдохновлена ​​шаблоном приложения Store Locator, который предоставляет нам динамический, полностью закодированный стартовый набор, написанный на React Native, который каждый может использовать для создания своего собственного приложения React Native для поиска магазинов или инициировать собственный стартап.

В этом руководстве повторяются реализации кодирования и дизайн из видеоурока Youtube от React UI Kit для клона пользовательского интерфейса приложения Car Parking Finder. Видеоруководство предоставляется с использованием скоростного кодирования с быстрыми реализациями, которые могут быть трудны для понимания любого разработчика. Поэтому видеоурок не предназначен для начинающих, так как не объясняет никаких деталей кода. Поэтому, чтобы сделать все проще и понятнее, эта серия руководств разбита на несколько разделов. Он также предоставляет пошаговое руководство по реализации каждого раздела пользовательского интерфейса приложения. Это облегчит задачу всем, особенно новичкам.

Обзор

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

Итак, начнем!!

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

Создание проекта Starter React Native

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

npm install -g expo

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

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

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

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

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

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 (
      <View style={styles.container}>
        <Text>Map</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Здесь мы импортировали компонент React из пакета «реагировать», чтобы настроить файл как файл реакции. Мы также импортировали некоторые необходимые компоненты из пакета react-native. Затем мы определили class с именем Map, который распространяется на Component модуль компонента React. В функции render() мы настроили голый минимальный шаблон, который имеет компонент View, обертывающий компонент Text. Затем мы определили некоторые стили, используя компонент StyleSheet.

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

import Map from './screens/Map'

Теперь нам нужно заменить код внутри метода render() файла App.js компонентом Map, как показано во фрагменте кода ниже:

render(){
    return (
      <Map />
    );
  }

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

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

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

Пост React Native Car Parking Finder App UI Clone # 1: Map View впервые появился на Kriss.

Раскрытие информации

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

Первоначально опубликовано на https://kriss.io 22 октября 2019 г.