Клон пользовательского интерфейса приложения React Native Car Parking Finder # 5: раздел заголовка
Это руководство является пятой частью нашей серии клонов пользовательского интерфейса приложения React Native Car Parking. в Последняя частьмы успешно внедрили маркеры карты в MapView раздел. В этой части серии руководств мы продолжим с того места, на котором остановились в предыдущей части. Итак, рекомендуется пройти все предыдущие части этой серии руководств, чтобы получить полное представление и развитие проекта.
Если кто-то хочет научиться с самого начала, все части этой серии руководств доступны ниже:
Как было сказано в предыдущих частях, эта серия руководств была вдохновлена Шаблон приложения для поиска магазинов который предоставляет нам динамический, полностью закодированный стартовый набор, написанный на React Native, который каждый может использовать для создания собственного приложения React Native для поиска магазинов или запуска собственного запуска. И эта пятая часть также является продолжением реализации кодирования и дизайна из видеоурока YouTube от Набор пользовательского интерфейса React для клона пользовательского интерфейса приложения Car Parking Finder. В видеоруководстве представлены общие реализации с использованием быстрого стиля кодирования, который может быть труден для понимания любым разработчиком, особенно новичкам. Тем не менее, это руководство содержит пошаговые инструкции по реализации каждого раздела пользовательского интерфейса. Следовательно, читатели могут расслабиться и потратить время на изучение и реализацию пользовательского интерфейса.
Обзор
В этой пятой части серии руководств мы собираемся реализовать раздел «Заголовок». В разделе «Заголовок» будет указано название обнаруженного местоположения, а также кнопка со значком меню с правой стороны. Но сначала идея состоит в том, чтобы перенести все свойства стиля цвета и размера в совершенно другой файл и импортировать его на наш экран карты. Затем мы настроим размер и цвет компонентов на экране карты, используя свойства из нашего внешнего файла. Наконец, мы реализуем раздел заголовка с кнопкой меню, что довольно просто.
Итак, начнем!!
Сохранение свойств стиля в другом файле
На этом этапе мы собираемся сохранить наши свойства размера и цвета, которые очень часто используются на экране карты, в другом файле с именем «theme.js». Это облегчит нам задачу назначения стилей различным компонентам. Теперь нам нужно создать файл с именем «theme.js» в нашей основной папке проекта, как показано во фрагменте кода ниже:
Как мы видим, у нас есть файл ‘theme.js’. Теперь в файле theme.js нам нужно определить свойства цвета и размера, как показано во фрагменте кода ниже:
const COLORS = {
red: '#D83C54',
gray: '#7D818A',
black: '#3D4448',
white: '#FFFFFF',
overlay: '#C1BEC0',
};
const SIZES = {
base: 12,
icon: 16,
font: 16,
}
export {
COLORS,
SIZES,
}
Здесь мы определили свойства стиля цвета и размера в COLORS а также SIZES постоянные переменные, которые затем экспортируются. COLORS переменная содержит различные цветовые свойства, содержащие соответствующие им цветовые коды. И для SIZES переменная, мы определили base размер как 12 и icon а также font размеры должны быть 16 пикселей.
Интеграция свойств цветового стиля на основе файла theme.js
Поскольку мы определили некоторые общие свойства стиля в файле theme.js, здесь мы собираемся импортировать стили из файла theme.js и интегрировать их во встроенные стили нашего компонента, а также стили в StyleSheet составная часть. Но сначала нам нужно импортировать файл theme.js в наш файл Map.js, как показано во фрагменте кода ниже:
import * as theme from '../theme';
Теперь мы собираемся изменить свойства стиля цвета и размера в соответствии с предопределенными стилями из файла theme.js.
Изменение свойств цветового стиля в соответствии с theme.js
Здесь мы собираемся изменить свойства цветового стиля с помощью COLORS переменная из файла theme.js. Все изменения, внесенные в свойства стиля в StyleSheet Компонент представлен во фрагменте кода ниже:
container: {
flex: 1,
backgroundColor: theme.COLORS.white
},
parking : {
flexDirection : 'row',
backgroundColor : theme.COLORS.white,
borderRadius : 6,
padding : 15,
marginHorizontal: 24,
width : width - ( 24 * 2 )
},
buy: {
flex: 1.25,
flexDirection : 'row',
padding : 8,
borderRadius : 6,
backgroundColor : theme.COLORS.red
},
marker: {
flexDirection: 'row',
backgroundColor: theme.COLORS.white,
borderRadius: 24,
paddingVertical: 12,
paddingHorizontal: 24,
borderWidth: 1,
borderColor: theme.COLORS.white,
},
markerPrice: {
color: theme.COLORS.red,
fontWeight: 'bold',
},
markerStatus: {
color: theme.COLORS.gray
},
shadow: {
shadowColor: theme.COLORS.black,
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.1,
shadowRadius: 4,
backgroundColor : theme.COLORS.white ,
elevation : 15
},
active: {
borderColor: theme.COLORS.red,
},
Теперь у нас есть несколько встроенных стилей, привязанных к различным компонентам в renderParking() метод. Нам нужно изменить их в соответствии с COLORS тоже переменная. Весь общий код с изменениями представлен во фрагменте кода ниже:
<TouchableWithoutFeedback key={`parking-${item.id}`} onPress={() => this.setState({ active: item.id })} >
<View style={[styles.parking, styles.shadow]}>
<View style={{flex : 1, flexDirection : 'column'}}>
<Text style={{fontSize: 16}}>x {item.spots} {item.title}</Text>
<View style={{width : 100, borderRadius : 6, borderColor : theme.COLORS.gray, borderWidth : 0.7, padding : 4}}>
<Text style={{fontSize : 16}}>05:00 hrs</Text>
</View>
</View>
<View style={{flex : 1.5, flexDirection : 'row'}}>
<View style={{flex : 0.5, justifyContent: 'center', marginHorizontal : 24}}>
<View style={{flex: 1, flexDirection : 'row', justifyContent : 'space-between', alignItems : 'center'}}>
<Ionicons name="ios-pricetag" size={16} color={theme.COLORS.gray}/>
<Text>${item.price}</Text>
</View>
<View style={{flex: 1, flexDirection : 'row', justifyContent : 'space-between', alignItems : 'center'}}>
<Ionicons name="ios-star" size={16} color={theme.COLORS.gray}/>
<Text>{item.rating}</Text>
</View>
</View>
<TouchableOpacity style={styles.buy}>
<View style={{flex:1, justifyContent: 'center'}}>
<Text style={{fontSize : 25, color : theme.COLORS.white}}>${item.price *2}</Text>
<Text style={{ color : theme.COLORS.white}}>{item.price}x{hours[item.id]} hrs</Text>
</View>
<View style={{flex : 0.5, justifyContent : 'center', alignItems : 'center'}}>
<Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text>
</View>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
Следовательно, мы полностью изменили свойства цвета. Теперь мы собираемся сделать то же самое со свойствами размера в соответствии с SIZES переменная из файла theme.js.
Изменение свойств размера в соответствии с theme.js
Здесь мы собираемся изменить свойства стиля размера с помощью SIZES переменная из файла theme.js. Все изменения, внесенные в свойства стиля в StyleSheet Компонент представлен во фрагменте кода ниже:
const styles = StyleSheet.create({
parkings:{
position: 'absolute',
right: 0,
left: 0,
bottom: theme.SIZES.base * 2,
paddingBottom : theme.SIZES.base * 2
},
parking : {
flexDirection : 'row',
backgroundColor : theme.COLORS.white,
borderRadius : 6,
padding : 15,
marginHorizontal: theme.SIZES.base * 2,
width : width - ( theme.SIZES.base * 4)
},
marker: {
flexDirection: 'row',
backgroundColor: theme.COLORS.white,
borderRadius: theme.SIZES.base * 2,
paddingVertical: 12,
paddingHorizontal: theme.SIZES.base * 2,
borderWidth: 1,
borderColor: theme.COLORS.white,
},
});
Кроме того, у нас есть несколько встроенных стилей размеров, привязанных к различным компонентам в renderParking() метод. Нам нужно изменить их в соответствии с SIZES тоже переменная. Весь общий код с изменениями представлен во фрагменте кода ниже:
<TouchableWithoutFeedback key={`parking-${item.id}`} onPress={() => this.setState({ active: item.id })} >
<View style={[styles.parking, styles.shadow]}>
<View style={{flex : 1, flexDirection : 'column'}}>
<Text style={theme.SIZES.font}>x {item.spots} {item.title}</Text>
<View style={{width : 100, borderRadius : 6, borderColor : theme.COLORS.gray, borderWidth : 0.7, padding : 4}}>
<Text style={theme.SIZES.font}>05:00 hrs</Text>
</View>
</View>
<View style={{flex : 1.5, flexDirection : 'row'}}>
<View style={{flex : 0.5, justifyContent: 'center', marginHorizontal : theme.SIZES.base * 2}}>
<View style={{flex: 1, flexDirection : 'row', justifyContent : 'space-between', alignItems : 'center'}}>
<Ionicons name="ios-pricetag" size={theme.SIZES.icon} color={theme.COLORS.gray}/>
<Text>${item.price}</Text>
</View>
<View style={{flex: 1, flexDirection : 'row', justifyContent : 'space-between', alignItems : 'center'}}>
<Ionicons name="ios-star" size={theme.SIZES.icon} color={theme.COLORS.gray}/>
<Text>{item.rating}</Text>
</View>
</View>
<TouchableOpacity style={styles.buy}>
<View style={{flex:1, justifyContent: 'center'}}>
<Text style={{fontSize : 25, color : theme.COLORS.white}}>${item.price *2}</Text>
<Text style={{ color : theme.COLORS.white}}>{item.price}x{hours[item.id]} hrs</Text>
</View>
<View style={{flex : 0.5, justifyContent : 'center', alignItems : 'center'}}>
<Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text>
</View>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
Следовательно, мы полностью изменили свойства размера на основе SIZES переменная.
Теперь мы собираемся сделать код в файле Map.js более понятным и стандартным. Для этого мы собираемся переместить некоторые встроенные свойства стиля в StyleSheet составная часть.
Организация встроенных стилей в таблицу стилей
Здесь мы собираемся сделать наш код более понятным, переместив наши встроенные стили в разные компоненты в StyleSheet составная часть. Для этого нам нужно определить переменную стиля для каждого встроенного стиля. Здесь, в файле Map.js, большинство встроенных стилей находятся в методе renderParking(). Итак, сначала мы собираемся определить переменную StyleSheet для каждого встроенного стиля, как показано во фрагменте кода ниже:
hours : {
flex : 1,
flexDirection : 'column'
},
hoursTitle: {
fontSize: theme.SIZES.text,
fontWeight: '500',
},
parkingInfoContainer : {
flex : 1.5,
flexDirection : 'row'
},
parkingInfo : {
flex : 0.5,
justifyContent: 'center',
marginHorizontal : theme.SIZES.base * 2
},
parkingIcon : {
flex: 1,
flexDirection : 'row',
justifyContent : 'space-between',
alignItems : 'center'
},
buyTotal : {
flex:1,
justifyContent: 'center'
},
buyButton : {
flex : 0.5,
justifyContent : 'center',
alignItems : 'center'
},
buyTotalPrice : {
fontSize : 25,
color : theme.COLORS.white
}
Теперь нам нужно назначить эти StyleSheet переменных свойств к соответствующему компоненту, как показано во фрагменте кода ниже:
<TouchableWithoutFeedback key={`parking-${item.id}`} onPress={() => this.setState({ active: item.id })} >
<View style={[styles.parking, styles.shadow]}>
<View style={styles.hours}>
<Text style={theme.SIZES.font}>x {item.spots} {item.title}</Text>
<View style={{width : 100, borderRadius : 6, borderColor : theme.COLORS.gray, borderWidth : 0.7, padding : 4}}>
<Text style={styles.hoursTitle}>05:00 hrs</Text>
</View>
</View>
<View style={styles.parkingInfoContainer}>
<View style={styles.parkingInfo}>
<View style={styles.parkingIcon}>
<Ionicons name="ios-pricetag" size={theme.SIZES.icon} color={theme.COLORS.gray}/>
<Text>${item.price}</Text>
</View>
<View style={styles.parkingIcon}>
<Ionicons name="ios-star" size={theme.SIZES.icon} color={theme.COLORS.gray}/>
<Text>{item.rating}</Text>
</View>
</View>
<TouchableOpacity style={styles.buy}>
<View style={styles.buyTotal}>
<Text style={styles.buyTotalPrice}>${item.price *2}</Text>
<Text style={{ color : theme.COLORS.white}}>{item.price}x{hours[item.id]} hrs</Text>
</View>
<View style={styles.buyButton}>
<Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text>
</View>
</TouchableOpacity>
</View>
</View>
</TouchableWithoutFeedback>
Следовательно, после того, как все будет организовано, мы получим тот же результат, что и раньше, который показан на следующем снимке экрана эмулятора:
Как мы видим, результат такой же, как и раньше, со всеми организованными кодами.
На этом этапе мы собираемся реализовать наш раздел заголовка в нашем файле Map.js. Раздел заголовка будет содержать название обнаруженного местоположения, как показано на карте, а также кнопку значка меню с правой стороны. В наших предыдущих частях этой серии руководств мы уже выделили функцию с именем renderHeader() метод. Этот renderHeader() метод возвращает шаблон для раздела заголовка. Мы также назвали это renderHeader() метод в render() метод нашего файла Map.js.
Теперь мы собираемся добавить некоторые компоненты в renderHeader() метод, который будет реализовывать раздел заголовка. Для этого нам нужно использовать код из следующего фрагмента кода:
renderHeader(){
return(
<View style={styles.header}>
<View style={{ flex: 1, justifyContent: 'center' }}>
<Text style={styles.headerTitle}>Detected location</Text>
<Text style={styles.headerLocation}>San Francisco, US</Text>
</View>
</View>
)
}
Здесь у нас есть родитель View компонент, который обертывает дочерний элемент View компонент с некоторыми встроенными стилями гибкости. Этот ребенок View компонент обертывает два Text компоненты, которые будут отображать имя обнаруженного местоположения. Text компоненты также привязаны к некоторым стилям. Необходимые стили представлены в приведенном ниже фрагменте кода:
header: {
flexDirection: 'row',
justifyContent: 'center',
paddingHorizontal: theme.SIZES.base * 2,
paddingTop: theme.SIZES.base * 2.5,
paddingBottom: theme.SIZES.base * 1.5,
},
headerTitle: {
color: theme.COLORS.gray,
},
headerLocation: {
fontSize: theme.SIZES.font,
fontWeight: '500',
paddingVertical: theme.SIZES.base / 3,
},
Следовательно, мы получим следующий результат на экране нашего эмулятора:
Таким образом, мы получили имя обнаруженного местоположения с правильным стилем в разделе «Заголовок».
Теперь нам нужно добавить кнопку со значком меню в правой части раздела «Заголовок».
Здесь мы собираемся добавить значок меню в правую часть раздела заголовка. Для этого мы собираемся использовать компонент Ionicons, который мы уже импортировали из пакета vector-icons, предоставленного клиентом expo. Код для добавления значка приведен во фрагменте кода ниже:
<View style={styles.header}>
<View style={styles.headerLocationInfo }>
<Text style={styles.headerTitle}>Detected location</Text>
<Text style={styles.headerLocation}>San Francisco, US</Text>
</View>
<View style={styles.headerIcon }>
<TouchableWithoutFeedback>
<Ionicons name="ios-menu" size={theme.SIZES.icon * 1.5} />
</TouchableWithoutFeedback>
</View>
Здесь мы добавили еще одного ребенка View компонент ниже View текст обтекания компонента для обнаруженного местоположения. Второй ребенок View компонент с некоторыми встроенными стилями гибкости обертывает TouchableWithoutFeedback составная часть. Затем TouchableWithoutFeedback компонент оборачивает Ionicons компонент со значком меню и реквизитом размера.
Необходимые стили представлены в приведенном ниже фрагменте кода:
headerIcon :{
flex: 1,
justifyContent: 'center',
alignItems: 'flex-end',
},
headerLocationInfo : {
flex: 1,
justifyContent: 'center'
},
Следовательно, мы получим следующий результат на экране эмулятора:
Как мы видим, у нас есть раздел заголовка с названием обнаруженного местоположения и значком меню справа.
Наконец, мы успешно реализовали раздел «Заголовок» на нашем экране карты. На этом мы подошли к концу этой части нашего урока. На этом наш пользовательский интерфейс экрана карты завершен.
Вывод
Это руководство является пятой частью серии руководств по клонированию пользовательского интерфейса приложения React Native Car Parking Finder. В этой части мы продолжили с того места, на котором остановились в четвертой части этой серии руководств. В этой части руководства мы узнали, как хранить свойства стиля в отдельном файле и использовать их для стилизации компонентов нашего экрана. Мы также организовали наши стили в StyleSheet компонент, чтобы сделать код стандартным и понятным. Наконец, мы также получили пошаговое руководство по реализации раздела заголовка.
В следующей части этой серии руководств мы собираемся реализовать модальное представление карточек парковочных мест.
