Клон пользовательского интерфейса приложения Camping Spots Finder с помощью React Native # 2: раздел списка — Kriss
Это руководство является второй частью нашего клона пользовательского интерфейса приложения Camping Spots Finder с использованием React Native. В предыдущей части мы успешно реализовали раздел просмотра карты вместе с пользовательскими заголовками и вкладками заголовков. Этот урок является продолжением того же урока, на котором мы остановились в предыдущей части. Итак, предлагается пройти предыдущие части для лучшего понимания и понимания всего проекта.
Как было сказано в предыдущей части, вдохновением для этой серии руководств послужил React нативный шаблон недвижимости это позволяет нам создавать полнофункциональные, готовые к развертыванию мобильные приложения, которые каждый может использовать для создания своих собственных приложений React Native. И эта вторая часть также является продолжением реализации кодирования и дизайна из видеоурока Youtube от Набор пользовательского интерфейса React для клона приложения Camping Spots Finder.
Во второй части этой серии руководств мы реализуем раздел списка, который мы выделили в предыдущей части этого руководства, а также настроим навигацию к экрану настроек. Но сначала мы собираемся внести несколько простых изменений в раздел заголовка, чтобы он выглядел чистым и правильным. Затем мы начнем реализовывать раздел списка и, наконец, добавим навигацию в конце.
Итак, начнем!!
Прежде всего, мы собираемся внести несколько простых изменений в раздел заголовка, который включает в себя настраиваемый заголовок и вкладки заголовка. Здесь, в файле Camping.js render() метод, мы собираемся включить только renderMap() а также renderList() метод компонента ScrollView. Затем мы собираемся изменить родителя View компонент к SafeAreaViewкомпонент и привязать к нему стиль. После этого мы включим renderHeader() метод выше ScrollView компонент, как показано во фрагменте кода ниже:
render(){
return (
<SafeAreaView style={styles.container}>
{this.renderHeader()}
<ScrollView style={styles.container}>
{this.renderMap()}
{this.renderList()}
</ScrollView>
</SafeAreaView>
);
}
Обратите внимание: нам нужно импортировать SafeAreaView компонент, а также из пакета react-native.
Здесь мы добавили SafeAreaView в качестве родительского компонента, потому что он позволяет отображать содержимое в границах безопасной области устройства. Однако мы должны быть осторожны, чтобы эта функция работала только с платформой iOS. Итак, нам нужно будет добавить дополнительный стиль на платформу Android, чтобы добиться того же результата, что и у SafeAreaView.
Но сначала мы собираемся обернуть весь шаблон renderHeader() метод с другим родителем View компонент и свяжите его с дополнительным стилем. И тогда мы позвоним renderTabs() метод внутри этого родителя View компонент после View компонент для пользовательского раздела заголовка, как показано во фрагменте кода ниже:
renderHeader() {
return (
<View style={styles.headerContainer}>
<View style={styles.header}>
<View style={{flex: 2, flexDirection: 'row'}}>
<View style={styles.settings}>
<View style={styles.location}>
<FontAwesome name="location-arrow" size={14} color="white" />
</View>
</View>
<View style={styles.options}>
<Text style={{ fontSize: 12, color: '#A5A5A5', marginBottom: 5, }}>
Detected Location
</Text>
<Text style={{ fontSize: 14, fontWeight: '300', }}>
Northern Islands
</Text>
</View>
</View>
<View style={styles.settings}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Settings')}>
<Ionicons name="ios-settings" size={24} color="black" />
</TouchableOpacity>
</View>
</View>
{this.renderTabs()}
</View>
)
}
Теперь нам нужно добавить стиль headerContainer к компоненту «Таблица стилей». И стиль с его свойствами представлен ниже:
headerContainer: {
top: 0,
marginTop : 20,
height: height * 0.15,
width: width,
}
Здесь нам нужно не забыть добавить marginTop style, если мы разрабатываем для платформы Android. Это потому, что SafeAreaView компонент не работает.
Следовательно, мы получаем следующий результат на экране нашего эмулятора:
Как мы видим, у нас есть раздел заголовка с пользовательским заголовком и вкладками заголовка в правильном положении.
Теперь мы собираемся реализовать раздел списка в renderList() метод, который мы определили в предыдущей части руководства.
Реализация раздела списка
На этом этапе мы собираемся реализовать раздел списка, в котором будут изображения и описание различных мест для кемпинга.
Включение фиктивных данных
Во-первых, мы собираемся включить фиктивные данные для мест для кемпинга в массив внутри renderList() метод. Фиктивные данные представлены во фрагменте кода ниже:
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',
},
{
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',
},
];
Здесь мы определили фиктивные данные как campings массив, который включает в себя объекты с детализацией мест для кемпинга. Теперь мы перейдем к реализации шаблона для раздела списка.
Создание элемента шаблона для раздела списка
Здесь мы собираемся начать с реализации простого шаблона внутри renderList() метод. Шаблон будет содержать некоторые View а также Text компоненты с введенными вручную фиктивными данными, как показано во фрагменте кода ниже:
<View>
<View>
<Text>Image</Text>
</View>
<View>
<Text>Camping title</Text>
<Text>Camping description</Text>
<View>
<Text>4.9</Text>
<Text>2.9 miles</Text>
<Text>Free</Text>
</View>
</View>
<View>
</View>
</View>
Следовательно, мы получим следующий результат на экране нашего эмулятора:
Как мы видим, никаких стилей и конфигураций в нем не добавлено. Мы собираемся сделать это на следующем шаге.
Добавление правильных стилей и иконок
Поскольку шаблон, который мы создали выше, не содержит стилей, мы собираемся добавить в него некоторые стили. Затем мы добавим несколько значков из Ionicons а также FontAwesome icon пакеты, которые мы импортировали в предыдущем уроке. Нам нужно добавить несколько flex свойства стиля, а также добавить больше View компоненты со стилями, чтобы придать шаблону элемента списка правильный вид. Код для реализации правильного шаблона элемента списка представлен во фрагменте кода ниже:
<View style={styles.camping}>
<View>
<Image />
</View>
<View style={styles.campingDetails}>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ fontSize: 14, fontWeight: 'bold' }}>
Camping title
</Text>
<Text style={{ fontSize: 12, color: '#A5A5A5', paddingTop: 5 }}>
Camping description
</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', }}>
<View style={styles.campingInfo}>
<FontAwesome name="star" color="#FFBA5A" size={12} />
<Text style={{ marginLeft: 4, color: '#FFBA5A' }}>3.5</Text>
</View>
<View style={styles.campingInfo}>
<FontAwesome name="location-arrow" color="#FF7657" size={12} />
<Text style={{ marginLeft: 4, color: '#FF7657' }}>3.0miles</Text>
</View>
<View style={styles.campingInfo}>
<Ionicons name="md-pricetag" color="black" size={12} />
<Text style={{ marginLeft: 4, color: 'black' }}>Free</Text>
</View>
</View>
</View>
</View>
Здесь у нас есть родитель View компонент, содержащий два дочерних View составные части. Первый ребенок View компонент зарезервирован для Image составная часть. Секунда View Компонент зарезервирован для раздела сведений внутри элемента списка. Секунда View компонент состоит из нескольких дочерних View компоненты со стилем. И эти View компоненты обертывают Icon компоненты, а также Text составные части.
Как видно из приведенного выше фрагмента кода, в каждом из них имеется несколько привязок стилей. View составная часть. Некоторые из них являются встроенными стилями, а некоторые — стилями из Stylesheet составная часть. Стиль от Stylesheet Компонент представлен во фрагменте кода ниже:
camping: {
flex: 1,
flexDirection: 'row',
borderBottomColor: '#A5A5A5',
borderBottomWidth: 0.5,
padding: 20,
},
campingDetails: {
flex: 2,
paddingLeft: 20,
flexDirection: 'column',
justifyContent: 'space-around',
},
campingInfo: {
flexDirection: 'row',
alignItems: 'center',
marginRight: 14,
},
Следовательно, мы получим следующий результат на экране нашего эмулятора:
Как мы видим, у нас есть правильный, но неполный элемент списка на экране эмулятора. Незавершенный, потому что нам все еще нужно добавить изображение слева и значок меню справа. Итак, давайте сначала добавим кнопку меню справа.
Здесь мы собираемся добавить кнопку меню с вертикальным значком параметров. Значок, который мы хотим включить, недоступен в FontAwesome или же Ionicons пакет значков. Итак, нам нужно импортировать еще один пакет значков, который SimpleLineIcons пакет значков из пакета векторных значков, как показано во фрагменте кода ниже:
import { FontAwesome , Ionicons, SimpleLineIcons} from '@expo/vector-icons';
Теперь мы собираемся использовать SimpleLineIcons package, чтобы добавить вертикальную кнопку меню со значком опции справа. Для этого нам нужно добавить еще один View компонент внутри второго дочернего элемента View компонент renderList() как показано в фрагменте кода ниже:
<View style={styles.campingDetails}>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ fontSize: 14, fontWeight: 'bold' }}>
Camping title
</Text>
<Text style={{ fontSize: 12, color: '#A5A5A5', paddingTop: 5 }}>
Camping description
</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', }}>
<View style={styles.campingInfo}>
<FontAwesome name="star" color="#FFBA5A" size={12} />
<Text style={{ marginLeft: 4, color: '#FFBA5A' }}>3.5</Text>
</View>
<View style={styles.campingInfo}>
<FontAwesome name="location-arrow" color="#FF7657" size={12} />
<Text style={{ marginLeft: 4, color: '#FF7657' }}>3.0miles</Text>
</View>
<View style={styles.campingInfo}>
<Ionicons name="md-pricetag" color="black" size={12} />
<Text style={{ marginLeft: 4, color: 'black' }}>Free</Text>
</View>
</View>
</View>
<View style={{ flex: 0.2, justifyContent: 'center' }}>
<SimpleLineIcons name="options-vertical" color="#A5A5A5" size={24} />
</View>
</View>
Здесь мы добавили View компонент, обертывающий SimpleLineIcons компонент, который имеет имя значкаoptions-verticle с некоторыми color а также size реквизит.
Следовательно, мы получаем следующий результат на экране нашего эмулятора:
Как мы видим, у нас есть кнопка параметров справа от элемента списка. Теперь мы собираемся заменить ручные данные-заполнители фиктивными данными, которые мы определили ранее в campings множество.
Интеграция фиктивных данных
На этом этапе мы собираемся интегрировать точные данные в точные заполнители в шаблоне элемента списка. Поскольку у нас есть массив с двумя объектами, мы будем перебирать массив, используя map() функция массива доступна в react-native. map() позволяет перебирать каждый элемент массива и возвращать требуемый шаблон. Родитель View компонент внутри map() функция примет уникальный идентификатор, известный как key который будет однозначно идентифицировать каждый элемент списка. Теперь для реализации map() массива и выполнить итерацию по массиву, который вернет шаблон для каждого элемента с фиктивными данными, нам нужно использовать код, указанный во фрагменте кода ниже, в наш renderList() метод:
return campings.map(
camping => {
return (
<View key={`camping-${camping.id}`} style={styles.camping}>
<View>
<Image />
</View>
<View style={styles.campingDetails}>
<View style={{ flex: 1, flexDirection: 'column', justifyContent: 'center' }}>
<Text style={{ fontSize: 14, fontWeight: 'bold' }}>
{camping.name}
</Text>
<Text style={{ fontSize: 12, color: '#A5A5A5', paddingTop: 5 }}>
{camping.description}
</Text>
</View>
<View style={{ flex: 1, flexDirection: 'row', }}>
<View style={styles.campingInfo}>
<FontAwesome name="star" color="#FFBA5A" size={12} />
<Text style={{ marginLeft: 4, color: '#FFBA5A' }}>{camping.rating}</Text>
</View>
<View style={styles.campingInfo}>
<FontAwesome name="location-arrow" color="#FF7657" size={12} />
<Text style={{ marginLeft: 4, color: '#FF7657' }}>{camping.distance} miles</Text>
</View>
<View style={styles.campingInfo}>
<Ionicons name="md-pricetag" color="black" size={12} />
<Text style={{ marginLeft: 4, color: 'black' }}>{camping.price}</Text>
</View>
</View>
</View>
<View style={{ flex: 0.2, justifyContent: 'center' }}>
<SimpleLineIcons name="options-vertical" color="#A5A5A5" size={24} />
</View>
</View>
)
})
Таким образом, мы получим следующий результат на экране нашего эмулятора:
Как видим, мы успешно реализовали раздел списка, содержащий два элемента списка. Элементы списка выделяют места для кемпинга вокруг карты в реальном приложении. Но нам все еще нужно включить изображение мест для кемпинга. Итак, теперь давайте поработаем над включением изображения.
Включение изображения в список
На этом этапе мы будем работать с изображением, которое должно быть включено в левую часть элемента списка. Мы уже разлучили ребенка View компонент внутри родителя View компонент renderList() метод, в котором мы определили Image составная часть. Теперь мы предоставим источник и некоторые свойства стиля этому компоненту изображения, как показано во фрагменте кода ниже:
<View key={`camping-${camping.id}`} style={styles.camping}>
<View style={{flex : 1, overflow: 'hidden'}}>
<Image
style={styles.campingImage}
source={{ uri: camping.image }}
/>
</View>
Необходимый стиль представлен в приведенном ниже фрагменте кода:
campingImage: {
width: width * 0.30,
height: width * 0.25,
borderRadius: 6,
},
Следовательно, мы получим следующий результат в нашей симуляции эмулятора:
![Создайте React Native WordPress приложение [Expo way] #9: Сохранение закладки](https://wonz.ru/wp-content/uploads/2022/09/1663600398_community_banner-768x432.png)