Клон пользовательского интерфейса приложения Car Parking Finder в React Native # 4: маркеры карты

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

Как упоминалось в предыдущих частях, вдохновением для этого урока послужил Шаблон приложения для поиска магазинов который предоставляет нам удивительный, полностью закодированный стартовый набор, написанный на React Native, который каждый может использовать для создания своего собственного приложения React Native для поиска магазинов или запуска собственного запуска. И эта четвертая часть также является продолжением реализации кодирования и дизайна из видеоурока YouTube от Набор пользовательского интерфейса React для клона приложения Camping Spots Finder. В видеоруководстве используется быстрый стиль кодирования, чтобы донести до зрителей общее руководство, которое может быть трудно понять любому разработчику, особенно новичкам. В этом руководстве даются пошаговые инструкции по реализации каждого раздела пользовательского интерфейса. Следовательно, читатели могут расслабиться и потратить время на реализацию пользовательского интерфейса.

Обзор

В этой четвертой части серии руководств мы добавим пользовательский маркер карты, который будет обозначать места парковки на карте. Идея состоит в том, чтобы интегрировать Marker компонент, предоставленный MapView компонент в MapView чтобы показать маркеры местоположения по умолчанию. Затем мы собираемся настроить маркеры, чтобы сделать их такими, как в реальном приложении. Наконец, мы собираемся добавить активный стиль к каждому маркеру карты.

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

Изменение `SrollView` к `FlatList`

Во-первых, мы собираемся внести дополнительные изменения в наш ScrollView в renderParkings() метод. Здесь мы собираемся изменить ScrollView в FlatList чтобы изменить наши карты парковочных мест в разделе парковки в список. Изменив его на FlatListмы получим все преимущества, предлагаемые FlatList компонент, а также может включать в себя ScrollView реквизит в FlatList составная часть. Реализация кода для этого представлена во фрагменте кода ниже:

renderParkings(){
      return(
        <FlatList
          horizontal
          pagingEnabled
          scrollEnabled
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={16}
          snapToAlignment="center"
          style={styles.parkings}
          data={parkingsSpots}
          keyExtractor={(item, index) => `${item.id}`}
          renderItem={({ item }) => this.renderParking(item)}
        />
      )
}

Здесь мы заменили ScrollView с FlatList составная часть. Большинство необходимых реквизитов, которые мы интегрировали в ScrollView для плавного перехода также включены в FlatList составная часть. Дополнительные реквизиты, которые мы добавили, являются данными для parkingsSpots , keyExtractor для уникальной идентификации каждого элемента в списке и renderItem который вернет шаблон. FlatList перебирает каждый элемент нашего parkingsSpots массив и вернуть представление списка, которое можно настроить как шаблон в renderItem опора

Обратите внимание, что мы не должны забывать импортировать компонент FlatList из реактивного пакета.

Теперь мы также собираемся добавить хук реакции под названием componentWillMount()который изменит состояние нашего hours state на 1, как показано в фрагменте кода ниже:

componentWillMount() {
    const hours = {};
    parkingsSpots.map(parking => {hours[parking.id] = 1});
    this.setState({ hours });
  }

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

Добавление маркеров карты

Здесь мы собираемся добавить маркер карты к нашему MapView составная часть. Для этого нам нужно будет добавить некоторые дополнительные данные о координатах в наш parkingsSpots данные массива, как показано в приведенном ниже фрагменте кода:

Пост Клон пользовательского интерфейса приложения React Native Car Parking Finder # 4: маркеры карты появился первым на Крисс.