Клон пользовательского интерфейса приложения Camping Spots Finder с помощью React Native # 4: Маркер карты
Это руководство является четвертой и последней частью нашего клона пользовательского интерфейса приложения Camping Spots Finder с использованием React Native. В предыдущей части мы успешно реализовали экран настроек с различными разделами пользовательского интерфейса. Этот урок является продолжением того, на чем мы остановились в предыдущей части. Итак, предлагается пройти предыдущие части для общего понимания и развития этого проекта.
Как упоминалось в предыдущих частях, эта серия руководств была вдохновлена React нативный шаблон недвижимости это позволяет нам создавать полнофункциональные, готовые к развертыванию мобильные приложения, которые каждый может использовать для создания своих собственных приложений React Native. И эта четвертая часть также является продолжением реализации кодирования и дизайна из видеоурока Youtube от Набор пользовательского интерфейса React для клона приложения Camping Spots Finder.
В этой заключительной части нашей серии уроков мы собираемся реализовать маркер, который будет показывать места для кемпинга на карте. Но сначала у нас есть незавершенные дела на экране настроек, которые заключаются в том, чтобы включить значки в групповые кнопки раздела «Тип». Затем мы перейдем к реализации маркера карты. После этого мы покажем маркер на карте на основе вкладок шапки.
Итак, начнем!!
Добавление значков в раздел «Тип»
На этом этапе мы собираемся добавить значки к групповым кнопкам раздела «Тип» на экране настроек. Мы заранее импортировали необходимый пакет значков в предыдущих руководствах. Здесь мы собираемся использовать некоторые из пакетов, которые предоставили нам подходящие значки. В разделе «Тип» мы только что добавили Text компонент, содержащий текст в кнопках группы. Теперь мы собираемся добавить несколько значков над Text составная часть. В первую групповую кнопку мы добавим две иконки из Foundation а также FontAwesome пакет иконок, завернутый View компонент со встроенным стилем. Во вторую и третью группы кнопок мы собираемся добавить отдельные значки, используя Foundation пакет значков во втором и FontAwesome в третьем. Для этого нам нужно использовать код из следующего фрагмента кода:
<View style={styles.section}>
<View>
<Text style={styles.title}>Type</Text>
</View>
<View style={styles.group}>
<TouchableOpacity
style={[styles.button, styles.first, type == 'all' ? styles.active : null]}
onPress={() => this.setState({ type: 'all' })}
>
<View style={{ flexDirection: 'row', }}>
<Foundation name="mountains" size={24} />
<FontAwesome name="truck" size={24} />
</View>
<Text style={[styles.buttonText, type == 'all' ? styles.activeText : null]}>All</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, type == 'tent' ? styles.active : null]}
onPress={() => this.setState({ type: 'tent' })}
>
<Foundation name="mountains" size={24} />
<Text style={[styles.buttonText, type == 'tent' ? styles.activeText : null]}>Tenting</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.last, type == 'rv' ? styles.active : null]}
onPress={() => this.setState({ type: 'rv' })}
>
<FontAwesome name="truck" size={24} />
<Text style={[styles.buttonText, type == 'rv' ? styles.activeText : null]}>RV Camping</Text>
</TouchableOpacity>
</View>
</View>
Следовательно, мы получаем следующий результат на экране эмулятора:
Как мы видим, у нас появились значки в групповых кнопках раздела Тип. Но эти значки не настроены с активным стилем. Вот почему они отображаются с черным цветом по умолчанию. Теперь нам нужно настроить эти значки с активным стилем, чтобы кнопка вместе со своим значком меняла цвет при выборе.
Переключение цвета в зависимости от активного типа
Здесь мы собираемся переключать цвет значков на основе активной кнопки. Для этого нам нужно определить функцию, которая обрабатывает активный тип кнопки с именем activeType(). Этот activeType() функция примет на себя key параметр, который будет установлен на выбранный тип при вызове. Затем эта клавиша назначается type состояние, которое мы определили в предыдущем уроке. Реализация функции представлена во фрагменте кода ниже:
const activeType = (key) => type === key;
Теперь нам нужно настроить стили в шаблоне раздела Type на основе activeType() как показано в фрагменте кода ниже:
<View style={styles.group}>
<TouchableOpacity
style={[styles.button, styles.first, activeType('all') ? styles.active : null]}
onPress={() => this.setState({ type: 'all' })}
>
<View style={{ flexDirection: 'row', }}>
<Foundation name="mountains" size={24} color={activeType('all') ? '#FFF' : '#FF7657' } />
<FontAwesome name="truck" size={24} color={activeType('all') ? '#FFF' : '#FFBA5A' } />
</View>
<Text style={[styles.buttonText, activeType('all') ? styles.activeText : null]}>All</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, activeType('tent') ? styles.active : null]}
onPress={() => this.setState({ type: 'tent' })}
>
<Foundation name="mountains" size={24} color={activeType('tent') ? '#FFF' : '#FF7657'} />
<Text style={[styles.buttonText, activeType('tent') ? styles.activeText : null]}>Tenting</Text>
</TouchableOpacity>
<TouchableOpacity
style={[styles.button, styles.last, activeType('rv') ? styles.active : null]}
onPress={() => this.setState({ type: 'rv' })}
>
<FontAwesome name="truck" size={24} color={activeType('rv') ? '#FFF' : '#FFBA5A'}/>
<Text style={[styles.buttonText, activeType('rv') ? styles.activeText : null]}>RV Camping</Text>
</TouchableOpacity>
</View>
Таким образом, мы видим, что для компонентов значков, которые мы добавили, был настроен цветовой стиль, основанный на activeType() функция. Более того, все динамические стили, которые будут отображать активное и неактивное состояние кнопки, настраиваются на основе activeType() кнопка. Это изменит цвет значка, а также кнопки, когда они активны. Следовательно, мы получаем следующий результат, как показано на скриншоте эмулятора ниже:
Как мы видим, кнопка вместе со своим значком в разделе «Тип» меняет цвет, когда они находятся в активном состоянии. Таким образом, это завершает общую реализацию экрана настроек в нашем клоне пользовательского интерфейса приложения Camping Spots Finder.
Теперь мы собираемся снова перейти к нашему экрану кемпингов. На экране Campings мы уже установили MapView компонент, отображающий карту на основе заданных координат. Теперь мы собираемся добавить несколько маркеров на карту, чтобы отобразить места для кемпинга на карте. Итак, давайте перейдем к экрану Campings.
Реализация маркера карты
Теперь мы вернемся к нашему экрану Campings, чтобы реализовать маркер в нашем компоненте MapView. Поскольку у нас есть два кемпинга в разделе списка, мы собираемся поставить на карту два маркера, которые обозначают их местоположение. Но сначала нам нужно включить некоторые дополнительные данные о координатах местоположения в наш campings массив, который мы определили в предыдущих руководствах. Мы собираемся включить значение широты и долготы наших кемпингов в каждый объект нашего campings массив, как показано в фрагменте кода ниже:
const campings = [
{
id: 1,
type: 'rv',
name: 'Camping Paradise',
description: 'Popular spot for trekkers.',
rating: 4.9,
distance: 2.9,
price: 'Free',
image: 'https://images.unsplash.com/photo-1525811902-f2342640856e?fit=crop&w=900&h=600&q=130',
latlng: {
latitude: 37.79335,
longitude: -122.4424,
}
},
{
id: 2,
type: 'tent',
name: 'Lake Florida',
description: 'This is for all sunset lovers.',
rating: 4.9,
distance: 2.9,
price: 'Free',
image: 'https://images.unsplash.com/photo-1506535995048-638aa1b62b77?fit=crop&w=900&h=600&q=130',
latlng: {
latitude: 37.78865,
longitude: -122.4324,
}
},
];
Импорт компонента «Маркер»
Теперь мы собираемся импортировать Marker компонент, предоставляемый пакетом react-native-maps. Marker компонент представляет собой метод, предоставляемый MapView компонент, который мы импортировали из пакета react-native-maps. Теперь мы собираемся импортировать компонент Marker, как показано во фрагменте кода ниже:
import MapView from 'react-native-maps';
const { Marker } = MapView;
Теперь нам нужно добавить это Marker компонент MapView компонент, который мы определили в предыдущих руководствах внутри renderMap() метод.
Добавление маркера
Здесь мы собираемся добавить Marker компонент на карту. Для этого MapView компонент должен обернуть Marker компонент внутри renderMap() метод. Marker компонент принимает опору coordinate значение, которое мы установим для значений местоположения, которые мы определили в campings множество. Общая реализация Marker в MapView представлен в приведенном ниже фрагменте кода:
renderMap(){
return(
<View style={styles.map}>
<MapView
style={{flex: 1, height : height * 0.5, width}}
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
{campings.map(marker => (
<Marker
key={`marker-${marker.id}`}
coordinate={marker.latlng}
/>
))}
</MapView>
</View>
)
}
Здесь мы используем map() метод, который мы можем применить к любому массиву для перебора всех его элементов. Нам нужно прикрепить map() функционировать, чтобы campings массив, который будет перебирать все элементы внутри campings массив, который в данном случае представляет собой два объекта. Затем map() функция вернет Marker шаблон со значением координат из campings объект массива. Marker компоненту присваивается key опора для идентификации каждого Marker компонент однозначно.
Следовательно, мы получим следующий результат на экране нашего эмулятора:
Как мы видим, на карте есть два значка маркера местоположения. Эти маркеры местоположения представляют собой расположение двух кемпингов в нашем массиве кемпингов.
Теперь мы собираемся изменить значки маркеров местоположения в зависимости от type кемпинга. Уникальные значки маркеров будут представлять уникальные кемпинги в зависимости от их типа.
Изменение значков маркеров
Здесь мы собираемся изменить значки наших маркеров местоположения на уникальные значки в зависимости от типа кемпинга на карте. Для этого нам нужно импортировать несколько дополнительных пакетов значков в уже импортированный пакет значков. Поэтому пакеты значков, которые нам нужно импортировать, представлены во фрагменте кода ниже:
import { FontAwesome , Foundation, Ionicons, SimpleLineIcons} from '@expo/vector-icons';
Здесь мы включили Foundation Пакет значков, который мы будем использовать при определении значков маркеров в соответствии с типом. Теперь, в renderMap() метод, мы собираемся определить функцию с именем campingMarker() который вернет соответствующий значок маркера в зависимости от типа кемпинга. На данный момент есть два типа кемпингов, а именно «дом на колесах» и «палатка». Тип «фургон» предназначен для кемпингов на колесах, где мы можем разбить лагерь вместе с вашим домом на колесах. Тип «палатка» предназначен для кемпинга с палаткой, где мы можем построить палатку и разбить лагерь. Реализация campingMarker() Функция представлена во фрагменте кода ниже:
renderMap() {
const campingMarker = ({type}) => (
<View style={[styles.marker, styles[`${type}Marker`]]}>
{type === 'rv' ?
<FontAwesome name="truck" size={18} color="#FFF" />
: <Foundation name="mountains" size={18} color="#FFF" />
}
</View>
)
Здесь campingMarker() функция принимает параметр с именем type который будет представлять тип кемпинга. И исходя из type значение, он вернет соответствующий значок маркера. Мы также можем видеть некоторые стили, привязанные к View компонент внутри функции. Необходимые стили представлены в приведенном ниже фрагменте кода:
marker: {
width: 40,
height: 40,
borderRadius: 40,
justifyContent: 'center',
alignItems: 'center',
borderWidth: 1,
borderColor: '#FFF',
},
rvMarker: {
backgroundColor: '#FFBA5A',
},
tentMarker: {
backgroundColor: '#FF7657',
},
Добавление значка в маркер
Теперь нам нужно вызвать campingMarker() функционировать внутри Marker компонент, как показано во фрагменте кода ниже:
return(
<View style={styles.map}>
<MapView
style={{flex: 1, height : height * 0.5, width}}
showsMyLocationButton
initialRegion={{
latitude: 37.78825,
longitude: -122.4324,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}
>
{this.state.campings.map(marker => (
<Marker
key={`marker-${marker.id}`}
coordinate={marker.latlng}
>
{campingMarker(marker)}
</Marker>
))}
</MapView>
</View>
)
Здесь мы назвали campingMarker() метод внутри Marker компонент с параметром, называемым marker присвоено ему. marker Параметр содержит единственный объект в нашем массиве кемпингов, который представляет все данные места для кемпинга.
Обратите внимание, что мы также включили showsMyLocationButton prop в компоненте MapView. Если showsMyLocationButton является false затем он скрывает кнопку для перемещения карты к текущему местоположению пользователя.
Следовательно, мы получаем следующий результат на экране нашего эмулятора:
Как мы видим, у нас появился маркер локации на экране с уникальными иконками как для типа «фургон», так и для типа «палатка». Таким образом, мы успешно завершили внедрение уникального маркера карты на карте нашего клона пользовательского интерфейса приложения Camping Spot Finder.
Но подождите, это еще не конец. Нам нужно реализовать еще одну вещь. То есть изменить маркеры местоположения на карте на основе вкладок заголовка, которые мы настроили в первом уроке.
Возможно, мы помнили, что реализовали раздел вкладок заголовка с кнопками вкладок в нашей первой части этой серии руководств. В заголовке было три кнопки под названием «Все места», «Палатки» и «Кемпинги на колесах», которые мы также можем видеть выше на скриншотах экрана кемпингов. Теперь нам нужно показать эти маркеры карты на основе этих трех кнопок вкладок. Результат должен быть:
- «Все места» показывает все места для кемпинга.
- «Палатка» показывает все места для кемпинга с типом «палатка».
- «Кемпинги на колесах» показывает все места для кемпинга с типом «дом на колесах».
Для этого нам нужно определить новое состояние, называемое campings который будет установлен на campings массив, который мы определили ранее, содержащий данные объекта места для кемпинга. Состояние должно быть определено, как показано в фрагменте кода ниже:
state = {
active : 'all',
campings : campings
}
Теперь нам нужно включить campings массив, который из state не из исходной переменной в map() функция, возвращающая Marker компонент, как показано во фрагменте кода ниже:
{this.state.campings.map(marker => (
<Marker
key={`marker-${marker.id}`}
coordinate={marker.latlng}
>
{campingMarker(marker)}
</Marker>
))}
Здесь значки маркеров в локации будут меняться в зависимости от значения в campings государство.
Обработка отображения маркеров
Далее нам нужно обработать отображение значков маркеров на основе кнопок вкладки заголовка. Возможно, мы помнили, что определили функцию с именем handleTab() который принимает значение ключа вкладки, чтобы изменить стиль активной вкладки. Теперь нам нужно сделать некоторые дополнительные настройки функции handleTab(), чтобы показать, что она будет обрабатывать изменение стиля кнопки активной вкладки, а также отображать соответствующие маркеры на карте. Для этого нам нужно использовать код из следующего фрагмента кода:
handleTab = (tabKey) => {
let newCampings = campings;
if(tabKey != 'all'){
newCampings = campings.filter(camping => camping.type == tabKey)
}
this.setState({ active: tabKey, campings : newCampings});
}
Здесь мы присвоили новую переменную с именем newCampings к исходному массиву кемпингов. Затем мы отфильтровали оригинал campings массив с помощью filter() функцию массива и присвоил ее newCampings переменная, основанная на tabKey ценность. Теперь, если tabKey не равно типу «все», то массив кемпингов фильтруется на основе tabKey значение и возвращается в newCampings массив еще newCampings массив равен оригиналу campings данные массива. Наконец, мы назначаем изменение состояния, используя setState функция.
Следовательно, мы получим следующий результат на экране нашего эмулятора:
Как мы видим, маркеры местоположения на карте меняются, когда мы нажимаем кнопки вкладки заголовка. Наконец, мы успешно завершили реализацию маркеров карты в нашем клоне пользовательского интерфейса приложения Camping Spots Finder.
Вывод
Это руководство является четвертой и последней частью серии руководств по клонированию пользовательского интерфейса приложения Camping Spot Finder. В этой части мы продолжили с того места, на котором остановились в третьей части этой серии руководств. В части руководства мы впервые узнали, как добавлять значки на кнопку и переключать стили значков в зависимости от активной кнопки. Затем мы получили подробное представление о том, как реализовать Marker компонент из пакета react-native-maps для отображения маркера местоположения на карте. Мы также научились отображать уникальную иконку в качестве маркера на карте. И, наконец, мы получили руководство о том, как изменить маркеры местоположения на основе кнопок активной вкладки.
На этом мы завершаем последнюю часть нашей серии руководств по клонированию пользовательского интерфейса приложения Camping Spots Finder. При этом мы, наконец, завершили общее руководство по клонированию пользовательского интерфейса приложения Camping Spots Finder.
Надеюсь, вам понравилась эта серия уроков!! Увидимся в следующем!!
Пост Клон пользовательского интерфейса приложения Camping Spots Finder с помощью React Native # 4: Маркер карты появился первым на Крисс.
Раскрытие информации
Этот пост содержит партнерские ссылки; Я могу получить компенсацию, если вы купите
продукты или услуги по разным ссылкам, приведенным в этой статье.
