Клон пользовательского интерфейса приложения для поиска парковки № 1: просмотр карты | Реагировать на родной

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

В этом учебном пособии воспроизведены реализации и проекты кодирования из видеоурока Youtube, созданного Набор пользовательского интерфейса React для клона пользовательского интерфейса приложения 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\> 

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

Как видим, мы выбираем пустой шаблон и нажимаем 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 screen компонента в наш файл 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 # 1: просмотр карты появился первым на Крисс.

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

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