Рубрики
Без рубрики

Создание приложения для путешествий геолокации IOS с реактивным

Приложение, которое управляет и удерживает отслеживание любимых мест и маршрутов, это то, что вы можете построить, используя React Native-Let начнутся!

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

Введение

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

Приложение, которое управляет и держит отслеживание любимых мест и маршрутов, это то, что вы можете построить, используя React Native!

II. Задний план

А. Реагировать натуральный

Реагировать родной является основой для создания мобильных приложений, использующих React и JavaScript. Он имеет поддержку для создания мобильных приложений для iOS и Android платформ. Рамка открыта с помощью Facebook в марте 2015 года. Он построен на предпосылке:

Узнайте один раз, напишите где угодно: постройте мобильные приложения с реагированием.

React Native имеет набор встроенных реагированных компонентов. Например, есть такие компоненты, как Таббар , Навигатор , Переключатель , DatePicker и MapView Отказ Эти компоненты переводятся на оригинальные компоненты iOS или Android. Макет компонентов контролируется реализацией Flexbox (CSS) Отказ Стили, указанные в реквизитах на реактивный нативный компонент, переводятся на стили на родных Uikit составная часть. Таким образом, реагируйте родные обертывания Uikit на iOS так же, как отреагируйте домо в Интернете.

B. Реакция

Реагистрация позволяет строить компоненты пользовательского интерфейса. Компоненты UI состоят из макета, стиля и JavaScript. Для веб-приложений макет переведен на HTML и стиль переведен на CSS.

III. Создать приложение

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

Наше приложение пример позволяет пользователю просматривать любимые места на карте по соседству. В приложении две вкладки: Места вкладка и Добавить вкладку Place Отказ Места вкладка Показывает любимые места в MapView составная часть. Добавить вкладку Place Добавляет место на карту. При нажатии на одно из любимых мест на карте пользователь доставлен на карты с указаниями вождения.

Мы создадим приложение приложения для платформы iOS.

А. Начало работы

Начало работы Страница обладает подробными инструкциями о том, как установить React Nature в вашей системе. Для Mac, установите узел и Watchman Отказ

brew install node
brew install watchman

React Nature – это узел, который устанавливается через NPM.

sudo npm install -g react-native-cli

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

react-native init Places

Чтобы запустить приложение в симуляторе iOS, используйте команду run-iOS из реагирования в папке проекта.

cd Places
react-native run-ios

Симулятор iOS запущен, и наш проект построен. Откроется новое окно терминала вверх, который слушает порта 8081 и обеспечивает пакет скрипта. Когда приложение развернуто в AppStore, пучок скрипта либо встроен в приложение, либо предоставляется службой, такой как apphub. Встроенное приложение установлено в симуляторе и открывается. Скриншот исходного проекта показан ниже.

B. Tabbed навигация

Точка входа для приложения iOS – index.ios.js файл. Любая модификация файла будет отражаться в симуляторе iOS, когда приложение перезагрузится. Чтобы перезагрузить приложение в симуляторе, используйте команду r или жестом встряхивания из меню Simulator.

Tabbarios является реагированным родным компонентом. Использование компонента предоставляет вкладки в нижней части вида. Вместе с Tabbarios мы импортируем Текст и Stylesheet составная часть.

import {
  AppRegistry,
  Text,
  TabBarIOS,
  StyleSheet
} from 'react-native';

Tabbarios Компонент содержит предметы Tabbarios.item Отказ Каждый элемент представляет собой вкладку с заголовком и значком. Товар также имеет выбранную собственность. Когда вкладка выбрана, она тонируется. Иконка может быть значок системы. Когда используется значок системы, заголовок предоставляется значок системы. Мы создадим навигацию с помощью двух вкладок следующим образом.


  
    
      Favorite Places
    
  
  
    
      Add Place

На наших вкладках мы размещаем дочерний компонент. Текстовый компонент отображается в представлении, когда выбрана вкладка. Текст Компонент отображается в верхнем левом углу вида. Мы будем стиль компонент, используя Stylesheet составная часть.

const styles = StyleSheet.create({
  text: {
    textAlign: 'center',
    color: '#333333',
    marginTop: 50,
  },
  view: {
    backgroundColor: '#fed',
    flex: 1
  }
});

Стиль текста, определенный выше, дает текст несколько цветов, выравнивает текст в центр и перемещает текст 50 пикселей сверху вида. Вид стилизован с цветным цветом. Стиль Flex: 1 делает Flexbox которые заполняют весь экран. Стили прикреплены к компоненту как для любого другого реагирования.


  Favorite Places

Для второй вкладки мы будем использовать пользовательскую икону и заголовок. Файлы изображения обычно хранятся в папке активов. Размер значка составляет 32 х 32. Изображение для PIN.PNG:

Приложение IOS Geolocation

Когда пользователь нажимает на вкладку, мы хотим выделить вкладку. Выделение вкладки выполняется путем изменения выбранного опоры соответствующей вкладки в True. Для достижения этого мы определяем ВыбратьTab государственный. ВыбратьTab Первоначально устанавливается на ноль, который соответствует первой вкладке.

constructor() {
  super();
  this.state = {
    selectedTab: 0
  };
}

Чтобы изменить ВыбратьTab мы обращаемся к onpress событие Tabbarios.item Отказ

handleTabPress(tab) {
  this.setState({ selectedTab: tab })
}

Наконец, мы используем ВыбратьTab State обновить Выбранный опора из вкладки. Полный JSX отображается для ясности.


  
    
      Favorite Places
    
  
  
    
      Add Place

Скриншот симулятора iOS после добавления вкладок показан ниже.

C. Карта любимых направлений

В этом разделе мы создадим карту и заполняем ее нашими любимыми направлениями. Эти места назначения являются часто посещаемыми местами по соседству.

Создать новый PlaceMap Компонент в файле с именем Place_map.js Отказ PlaceMap Компонент будет использовать MapView Компонент реагированной на родице. MapView Компонент предназначен только для платформы iOS. Первоначальный код для PlaceMap Компонент показан ниже.

import React, { Component } from 'react';
import {
  MapView,
  View,
  StyleSheet
} from 'react-native';

export default class PlaceMap extends Component {
  render() {
    return (
      
    );
  }
}

const styles = StyleSheet.create({
  map: {
    flex: 1
  }
});

MapView Компонент разрешено сгибать и заниматься весь экран. MapView Компонент должен быть снабжен исходной областью. Регион устанавливается через реквизиты. В регионе пять свойств: широта , долгота , Latitudededelta (Zoom) , Лэндодудерта, и Название Отказ

Карта закреплена с Белый дом в центре. Для просмотра карты PlaceMap Компонент должен быть размещен на первой вкладке следующим образом.

Наши любимые направления хранятся как аннотации на карте. Аннотация имеет Название , широта и долгота Отказ Мы определим аннотации о состоянии основного компонента Места Отказ

constructor() {
  super();
  this.state = {
    selectedTab: 0,
    annotations: [
      {
        title: 'Smithsonian Museum',
        latitude: 38.8980,
        longitude: -77.0230
      },
      {
        title: 'UMCP',
        latitude: 38.9869,
        longitude: -76.9426
      },
      {
        title: 'Arlington',
        latitude: 38.8783,
        longitude: -77.0687
      }
    ]
  };
}

Аннотации поставляются на PlaceMap через реквизиты.

Аннотации также передаются на MapView составная часть. MapView Компонент отображает аннотации в качестве маркеров на карте. Нажатие на один из маркеров покажет заголовок.

Скриншот симулятора после добавления MapView Компонент показан ниже.

D. Форма для добавления мест

Пользователи взаимодействуют с приложением, используя различные входные компоненты:

  • TextInput Компонент принимает ввод текста.
  • Touchablehighlight Компонент реагирует на пользователь касается и работает как кнопка.
  • Другие компоненты для принятия пользовательского ввода – Сборщик , Слайдер и Переключатель составная часть.

В этом разделе мы добавим форму с тремя TextInput Компоненты и A Touchablehighlight составная часть. TextInput Компоненты соответствуют Название , Широта и Долгота место. Первоначальный код для Дополнение Компонент показан ниже.

import React, { Component } from 'react';
import {
  Text,
  TextInput,
  TouchableHighlight,
  View,
  StyleSheet
} from 'react-native';

export default class AddPlace extends Component {
  render() {
    return (
      
        Title
        
        Latitude
        
        Longitude
        
        
          Add Place
        
      
    );
  }
}

const styles = StyleSheet.create({
  view: {
    paddingTop: 50,
    paddingLeft: 30,
    paddingRight: 30,
    backgroundColor: '#fed',
    flex: 1
  },
  text: {
    color: '#333333',
    marginBottom: 5
  },
  textInput: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    marginBottom: 5
  },
  button: {
    backgroundColor: '#ff7f50',
    padding: 12,
    borderRadius: 6
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center'
  }
});

Обработка клавиатуры – это немного вызова. Если вы посмотрите внимательно, широта и долгота иметь числовой ввод. KeyboardType компонента можно установить на Числовое Чтобы включить числовой вход. Но числовой вход не допускает отрицательных чисел. Оба широта и долгота может быть отрицательным. Чтобы допустить негативные числа, KeyboardType должен быть установлен на Числа и пунктуация Отказ

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

constructor() {
  super();
  this.state = {
    title: '',
    latitude: '',
    longitude: '',
    titleError: '',
    latitudeError: '',
    longitudeError: ''
  };
}

TextInput Компонент должен быть контролируемым компонентом. Значение получено из состояния. Onchangetext Событие обрабатывается для установки соответствующего состояния.

 this.setState({ title })}
>

onpress событие Touchablehighlight компонент должен быть обработан. Обработчик событий проверяет, заполнены ли все поля. Он отображает сообщения об ошибках, если таковые имеются. Если сообщения об ошибках отсутствуют, местоположение добавляется на карту.

handleAddPlace() {
  const { title, latitude, longitude } = this.state;
  let titleError = '';
  let latitudeError = '';
  let longitudeError = '';
  if (!title) {
    titleError = 'Name is required.';
  }
  if (!latitude) {
    latitudeError = 'Latitude is required.';
  }
  if (!longitude) {
    longitudeError = 'Longitude is required.';
  }

  this.setState({
    titleError,
    latitudeError,
    longitudeError
  });

  const isError = titleError || latitudeError || longitudeError;
  if (!isError) {
    this.props.onAddPlace({
      title,
      latitude: parseFloat(latitude),
      longitude: parseFloat(longitude)
    });

    AlertIOS.alert(
      'Place added',
      'Your place is added to the map. Click on the Favorites tab to view.'
    );
  }

  dismissKeyboard();
}

Алеорис Компонент является частью реагирования на родных. Он используется для отображения модального диалога после завершения действия. Мы также отклоняем клавиатуру с помощью Увольнение доски полезность.

import dismissKeyboard from 'dismissKeyboard';
dismissKeyboard();

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

const Error = (props) => {
  return (
    {props.message}
  );
}

Ошибка . Компонент находится ниже TextInput Компонент и отображается только тогда, когда есть ошибка.

Title
 this.setState({ title })}
>

Дополнение Компонент должен быть размещен на второй вкладке Места составная часть. OnAddplace опоры используется для передачи места на родительский компонент.

handleaddplace Метод Места Компонент добавляет местоположение к Аннотации Государство Отказ Государство неизменно. Массив аннотаций копируется на новый массив. Новый массив добавляет местоположение как другое аннотация. Государство обновляется с новым массивом.

handleAddPlace(annotation) {
  const annotations = this.state.annotations.slice();
  annotations.push(annotation);
  this.setState({ annotations });
}

Скриншот симулятора iOS для добавления места показан ниже.

E. Интеграция с приложением MAPS

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

render() {
  const { annotations } = this.props;
  annotations.forEach(annotation => {
    annotation.rightCalloutView = (
      
        Navigation
      
    );
    })
  return (
    
      
    
  );
  }
}

Каждая аннотация имеет левую кнопку ALLECALLOUTVIEW, RUPCOLLOUTVIEW и DellightCallOutView. Эти представления отображают пользовательский компонент по аннотации. Мы добавим Touchablehighlight Компонент для правого элемента. onpress Обработчик событий откроет приложение MAPS для навигации по трафикам.

handleNavigation(la, lo) {
  const rla = this.region.latitude;
  const rlo = this.region.longitude;
  const url = `http://maps.apple.com/?saddr=${rla},${rlo}&daddr=${la},${lo}&dirflg=d`;
  return Linking.openURL(url);
}

Модуль связывания используется для обработки входящих глубоких ссылок и открытых внешних глубоких ссылок. Глубокие ссылки позволяют открывать другое приложение на мобильном устройстве с некоторыми действиями. Глубокая ссылка для приложения MAPS – http://maps.apple.com Отказ Параметры запроса, передаваемые на приложение MAPS, используются для создания направлений вождения. Садрод Параметр обеспечивает начальный адрес, который является необязательным. Если начальный адрес пропускается, направления движения генерируются из текущего местоположения пользователя. DADDR Параметр предоставляет адрес назначения. dirflg = d Параметр генерирует направления движения для автомобилей.

Скриншот для симулятора iOS после открытия приложения MAPS показано ниже.

F. упаковка

Мы построили приложение Geolocation Travel для платформы iOS в этом руководстве. Мы создали начальный проект, используя React - родной init команда. Мы устанавливаем навигацию в Tabbed для нашего приложения. Первая вкладка открывается MapView Компонент с любимыми местами, закрепленными на карте. Вторая вкладка позволяет пользователю добавлять больше мест на карту. Наконец, мы интегрировали наше приложение в приложение MAPS для навигации по трафикам, используя выноски по аннотации.

Учебник имеет сопроводительное Проект GitHub Отказ

Соответствующие учебные пособия, которые вас могут быть заинтересованы в

  • РЕАКТИРОВАННЫЙ СОЗДАНИЕ VS IONIC: Сравнение бокового окрестности
  • Принципы проектирования пользовательского интерфейса Каждый разработчик мобильных приложений/дизайнер должен следовать
  • 10 вещей, чтобы подумать, прежде чем идти на мобильном

Читайте ещё по теме: