Пользовательский интерфейс приложения React Native Plant №9: Реализация экрана просмотра

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

Если вы хотите научиться с самого начала, все предыдущие части этой серии руководств доступны ниже:

Как упоминалось в предыдущих частях, эта серия руководств была вдохновлена Реагировать на нативные шаблоны приложений которые предоставляют широкий спектр шаблонов мобильных приложений, написанных на React Native и обладающих универсальными функциями и дизайном. Эти шаблоны приложений позволяют нам реализовывать собственные приложения и даже запускать собственные стартапы. И эта девятая часть также является продолжением реализации кодирования и дизайна из видеоурока Youtube от Набор пользовательского интерфейса Reactдля приложения «Завод». В видеоруководстве очень подробно представлена ​​реализация кодирования всего приложения. Однако устных указаний по кодированию и реализации нет. Следовательно, эта серия руководств является реализацией того же стиля кодирования и дизайна, что и статья. Таким образом, учащиеся могут пройти каждый шаг и не торопиться с пониманием реализации.

Обзор

В этой девятой части этой серии руководств мы собираемся реализовать некоторые части пользовательского интерфейса экрана «Обзор». Экран просмотра будет содержать три раздела пользовательского интерфейса. Три раздела пользовательского интерфейса — это раздел заголовка, раздел вкладок и раздел категорий. В этой части мы собираемся реализовать раздел заголовка, который будет содержать имя экрана и аватар профиля. И раздел вкладок, который будет содержать три кнопки вкладок. Наконец, мы также реализуем стиль кнопки активной вкладки.

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

Простой шаблон React Native для экрана просмотра

Здесь мы собираемся добавить простой шаблон на экран просмотра, чтобы мы могли перейти к нему.

Но сначала нам нужно раскомментировать импорт и инициализацию экрана просмотра в файле index.js папки «./navigation/».

Затем, чтобы добавить простой шаблон на экран просмотра, мы можем использовать код из следующего фрагмента кода в файле Browse.js:

import React from 'react';
import { StyleSheet } from 'react-native';
import { theme } from '../constants';
import { Button, Block, Text} from '../components';
export default class Browse extends React.Component {

  render(){
    return (
      <Block>
          <Text>Browse</Text>
      </Block>
    );
  }
  
}

const styles = StyleSheet.create({
});

Здесь у нас есть импорт из пакета react-native и предопределенные пользовательские компоненты. Затем мы воспользовались Block компонент, который обертывает Text компонент в качестве шаблона.

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

Как мы видим, теперь мы можем перейти к экрану просмотра после того, как нажмем кнопку входа.

Здесь мы собираемся реализовать раздел заголовка экрана просмотра. Раздел заголовка прост и состоит из имени экрана и аватара профиля. Чтобы реализовать раздел заголовка, нам нужно использовать код из следующего фрагмента кода:

render(){
    return (
      <Block>
          <Block flex={false} row center space="between" style={styles.header}>
            <Text h1 bold>Browse</Text>
            <Button> </Button>
            </Block>
      </Block>
    );

Здесь мы воспользовались Block компонент с некоторыми реквизитами стиля. Block компонент оборачивает Text компонент и Button составная часть. Text Компонент также настроен с некоторыми реквизитами стиля. Существует стиль, связанный с Block компонент, представленный во фрагменте кода ниже:

header: {
  paddingHorizontal: theme.sizes.base * 2,
},

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

Здесь у нас есть заголовок экрана в разделе заголовка. Теперь нам нужно добавить аватар профиля.

Добавление аватара профиля

Здесь мы собираемся добавить аватар профиля в правую часть раздела заголовка. Для этого нам нужно импортировать данные профиля из файла mock.js папки «./constants/». Для этого нам нужно добавить следующий код в наш файл Browse.js:

import { theme, mocks } from '../constants';

Здесь мы импортировали фиктивные данные из файла mocks.js как mocks. Теперь нам нужно определить свойство по умолчанию и взять данные профиля из mocks переменная. Для этого нам нужно использовать код из следующего фрагмента кода:

Browse.defaultProps = {
    profile : mocks.profile
}

Здесь мы взяли profile данные из mocks в profile опора для экрана просмотра. Теперь нужно определить эту опору профиля внутри render() функция:

render(){
    const { profile } = this.props;

Теперь мы собираемся добавить Image компонент с изображением профиля на Button компонент, который был пуст. Для этого нам нужно использовать код из следующего фрагмента кода:

return (
      <Block>
          <Block flex={false} row center space="between" style={styles.header}>
            <Text h1 bold>Browse</Text>
            <Button>
                <Image source={profile.avatar} style={styles.avatar}/>
            </Button>
            </Block>
      </Block>
    );

Здесь мы добавили Image компонент с source из профиля, а также состоят из стиля. Необходимый стиль представлен в приведенном ниже фрагменте кода:

avatar: {
  height: theme.sizes.base * 2.2,
  width: theme.sizes.base * 2.2,
},

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

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

Реализация раздела вкладок

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

Но сначала нам нужно определить tabs массив с данными, которые будут названиями наших вкладок. Для этого нам нужно использовать код из следующего фрагмента кода в функции render():

const tabs = ['Products', 'Inspirations', 'Shop'];

Теперь нам нужно определить новую функцию с именем renderTab(). Эта функция вернет шаблон для раздела вкладок. На данный момент мы собираемся сохранить простой шаблон внутри renderTab() как показано в фрагменте кода ниже:

renderTab(tab){
      return(
          <Text>{tab}</Text>
      )
  }

Эта функция принимает параметр, который будет представлять данные вкладки. Теперь нам нужно вызвать эту функцию для нашего render() как показано в фрагменте кода ниже:

<Block>
      <Block flex={false} row center space="between" style={styles.header}>
        <Text h1 bold>Browse</Text>
        <Button>
            <Image source={profile.avatar} style={styles.avatar}/>
        </Button>
        </Block>
        <Block flex={false} row>
            {tabs.map(tab => this.renderTab(tab))}
        </Block>
  </Block>

Здесь мы назвали renderTab() функция внутри Block компонент, который находится ниже блока, содержащего шаблон раздела заголовка. Чтобы перебрать данные вкладки в tabs массив, который мы использовали map() функция массива.

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

Как мы видим, у нас есть заголовки вкладок на экране просмотра. Но это выглядит совсем не привлекательно. Итак, мы собираемся добавить некоторую конфигурацию стиля с дополнительными компонентами, чтобы сделать раздел вкладок более привлекательным.

Настройка активного состояния для вкладок

Здесь мы собираемся определить активное состояние, чтобы стилизовать активную вкладку. Для активного стиля вкладки нам нужно определить переменную состояния с именем active который будет обрабатывать стиль активной вкладки. Для этого нам нужно использовать код из следующего фрагмента кода:

state = {
     active: 'Products',
 }

Здесь active состояние установлено на вкладку «Продукты» из tabs множество. Теперь нам нужно инициализировать это состояние внутри renderTab() как показано в фрагменте кода ниже:

renderTab(tab){
        const { active } = this.state;
        const isActive = active === tab;
        return(
            <Text>{tab}</Text>
        )
    }

Здесь мы определили новую константу с именем isActive и его значение зависит от активного состояния.

Настройка шаблона вкладки

Здесь мы собираемся добавить некоторые дополнительные предопределенные пользовательские компоненты, а также компоненты из пакета react-native, чтобы правильно расположить и стилизовать раздел вкладок на экране. Для этого нам нужно использовать код из следующего фрагмента кода в renderTab() функция:

renderTab(tab){
        const { active } = this.state;
        const isActive = active === tab;
        return(
            <TouchableOpacity
                key={`tab-${tab}`}
                style={[
                styles.tab,
                isActive ? styles.active : null
                ]}
            >
                <Text size={16} medium gray={!isActive} secondary={isActive}>
                {tab}
                </Text>
            </TouchableOpacity>
        )
    }

Здесь мы добавили TouchableOpacity компонент в качестве родительского компонента, который настроен с различными реквизитами. key prop для уникальной идентификации каждой вкладки. Существуют также свойства стиля, в которых каждый зависит от isActive постоянный. TouchableOpacity компонент оборачивает Text компонент с некоторой опорой стиля. Некоторые стилевые реквизиты в Text компонент также зависит от isActive постоянный.

Обратите внимание, что мы должны помнить об импорте необходимых компонентов, используемых из реактивного пакета, такого как TouchableOpacity составная часть.

Теперь, в render() функции, нам нужно добавить стиль к Block обертывание вызова renderTab() функция:

<Block flex={false} row style={styles.tabs}>
      {tabs.map(tab => this.renderTab(tab))}
  </Block>

Необходимые стили в renderTab() а также render() функции представлены в приведенном ниже фрагменте кода:

tabs: {
   borderBottomColor: theme.colors.gray2,
   borderBottomWidth: 0.5, //for iOS : StyleSheet.hairLineWidth
   marginVertical: theme.sizes.base,
   marginHorizontal: theme.sizes.base * 2,
 },
 tab: {
   marginRight: theme.sizes.base * 2,
   paddingBottom: theme.sizes.base
 },
 active: {
   borderBottomColor: theme.colors.secondary,
   borderBottomWidth: 3,
 }

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

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

Изменение активной вкладки при нажатии

Здесь мы собираемся изменить активный стиль с одной вкладки на другую в зависимости от того, какая вкладка нажата. Для этого нам нужно использовать код из следующего фрагмента кода в renderTab() функция:

<TouchableOpacity
    key={`tab-${tab}`}
    style={[
    styles.tab,
    isActive ? styles.active : null
    ]}
    onPress={() => this.setState({ active : tab})}
>
    <Text size={16} medium gray={!isActive} secondary={isActive}>
    {tab}
    </Text>
</TouchableOpacity>

Здесь мы добавили onPress событие в TouchableOpacity составная часть. в onPress событие, мы меняем состояние active переменная состояния на основе вкладки, на которую нажимают.

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

Как мы видим, теперь мы можем изменить активный стиль вкладки, нажав на каждую вкладку. Что ж, на этом реализация раздела «Вкладки» на экране «Обзор» завершена. На этом мы подошли к концу этой части урока.

В этой части мы успешно завершили реализацию раздела заголовка и раздела вкладок на экране просмотра приложения React Native Plant UI.

Вывод

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

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

Если вам понравилась эта статья, пожалуйста, поставьте лайк и поделитесь ею. И, если у вас есть какие-либо проблемы или проблемы, пожалуйста, прокомментируйте ниже. Спасибо!!

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *