Рубрики
Без рубрики

Тематические компоненты облегчают реагировать на родной +

Узнайте, как тематически реагировать на родные компоненты, используя API-контекст React API и компенсируйте.

Автор оригинала: Andrey Luiz.

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

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

Также без надлежащей организации собственное применение реагирования может превратиться в хаос. Так что темы пригодится.

Выбирая цвета

Чтобы облегчить боль, которую я использую Этот сайт генерировать цвета.

Прекрасно, насколько красивые цвета выскакиваются из удара пробела.

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

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

Прежде чем начать

В этом руководстве мы будем использовать React 16.3, React Context API и Пересчитать Отказ Мы также создадим некоторые HOCS WED для повторных целей.

Если вы не знаете, что компенсируется, прочитайте Строительные HOCS с компенсацией Пост на среде, который объясняет, что это такое и как его использовать.

Если вы не знакомы с функцией контекста RACT, прочитайте Это первым.

Еще одна важная информация касается структуры кода. Все мои компоненты используют компенсируют для чего-то. Так что гипотетический MyComponent Структура каталогов компонента будет:

┌─ MyComponent/
├─── MyComponent.js 
└─── index.js

Mycomponent.js Файл – сам компонент (функциональный компонент). index.js Файл – это то, где рекомендуется компенсировать все его HOC и экспортирует расширенный компонент.

Настройка темы

Нам нужно установить место для проведения наших тем. В моем проекте у меня есть файл под названием Themes.js Отказ Он проводит мои темы, а также экспортирует мой поставщик и потребительский контекст.

import React from 'react';

const themes = {
  beans: {
    text: '#191923',
    secondaryText: '#818187',
    lightText: '#FBFEF9',
    bg: '#FBFEF9',
    primary: '#FF206E',
  },
  chaid: {
    text: '#222823',
    secondaryText: '#A7A2A9',
    lightText: '#F4F7F5',
    bg: '#F4F7F5',
    primary: '#2274A5',
  },
};

const { Provider, Consumer } = React.createContext(themes.chaid);

export {
  Provider,
  Consumer,
  themes,
};

Обратите внимание, что я устанавливаю весь объект темы в качестве значения контекста. Это облегчит вещи в будущем.

Упаковка с нашим провайдером

Теперь мы создадим компонент, который обернут любые дети, пройденные с провайдером, полученным из theme.js файл.

// AppContainer/AppContainer.js
// @flow
import React from 'react';
import { Provider as ThemeProvider, themes } from '../../theme';

type Props = {
  theme: string,
  children: any
};

const AppContainer = ({
  theme,
  children,
}: Props) => (
  
    {children}
  
);

export default AppContainer;

// AppContainer/index.js
// @flow
import { compose, withState } from 'recompose';
import AppContainer from './AppContainer';

const EnhancedAppContainer = compose(
  withState('theme', 'setTheme', 'chaid'),
)(AppContainer);

export default EnhancedAppContainer;

Обратите внимание, что я не использую SetTheMee от компенсации. У меня пока нет случая использования. Я установил тему по умолчанию в index.js Файл и используйте его. Но в приложении не сложно создавать обработчик для переключения темати. Поскольку в центре внимания этого учебника – показать, как создавать тематические компоненты, я не буду охватывать это.

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

Используя контейнер

Наш контейнер обернет все наше приложение.

// App.js
import React from 'react';
import { NativeRouter } from 'react-router-native';
import { Scenes } from '../../scenes';
import AppContainer from '../AppContainer';

class App extends React.Component {
  render() {
    return (
      
        
          
        
      
    );
  }
}

export default App;

Это корневой компонент, который реагирует на родных регистров (в моем случае EXPO). Другой файл заботится об этом.

Теперь интересная часть.

Настройка требуемых HOCS

Как время написания, компенсируйте было в версии 0.27.1. В Исходный код Есть ИзRenderProops файл. Это тоже Документировано Отказ Но этот HOC еще не был выпущен. Так что я позаимствовал freenderprops.js Файл и создал HOC в моем источнике в SRC/HOCS каталог.

Я не изобретаю колесо здесь. Я поддерживаю самому, что-то рекомендую будет поддерживать в будущем. После того, как реклама поддерживает его, я могу удалить этот HOC.

Этот HOC извлекает рендеринг реквизиты из компонента и отображает его как обычные реквизиты. React Context Consumer получает значение контекста посредством рендеринга. Этот HOC будет полезен для создания другого HOC. Я назвал это Стема.js и сохранил это в том же SRC/HOCS каталог. Вот что это делает:

import { compose, defaultProps, setDisplayName } from 'recompose';
import fromRenderProps from './fromRenderProps';
import { Consumer as ThemeConsumer } from '../theme';

export default compose(
  setDisplayName('withTheme'),
  defaultProps({
    theme: {},
  }),
  fromRenderProps(ThemeConsumer, theme => ({ theme })),
);

Это просто отображает тему рендеринга от потребителя к нормальным реквизитам.

Используя наш новый HOC

Первый хороший пример – вид. У меня есть две версии: тему и непечатанный Отказ Первый хорошо используется в качестве контейнеров, где следует использовать цвет фона вашей темы. Другой может быть использован в макетах.

// View/View.js
// @flow
import React from 'react';
import { View as RNView } from 'react-native';

type ViewProps = {
  children: React.ReactNode,
};

const View = ({
  children,
  ...props
}: ViewProps) => (
  
    {children}
  
);

export default View;

// View/ThemedView.js
// @flow
import React from 'react';
import { View as RNView, StyleSheet } from 'react-native';

type Props = {
  children: React.ReactNode,
  style: ?Object,
};

const getStyles = props => StyleSheet.create({
  view: {
    backgroundColor: props.backgroundColor,
  },
});

const ThemedView = ({
  children,
  style,
  ...props
}: Props) => {
  const styles = getStyles(props);
  return (
    
      {children}
    
  );
};

export default ThemedView;

// View/index.js
import { compose, withProps, branch, renderComponent } from 'recompose';
import View from './View';
import ThemedView from './ThemedView';
import { withTheme } from '../../../hocs';

const EnhancedView = compose(
  withTheme,
  branch(
    props => props.themed,
    compose(
      withProps(props => ({
        backgroundColor: props.theme.bg,
      })),
      renderComponent(ThemedView),
    ),
  ),
)(View);

export default EnhancedView;

В index.js Файл мы:

  1. Используйте нашу с этим HOC как первый по порядку;
  2. (Необязательно) Определите некоторые реквизиты с хорошими именами для использования внутри наших компонентов;
  3. (Необязательно) Определите ветку, чтобы сделать Тематический вид Если Тематические предпримет существует. По умолчанию Olk – это упакованный компонент, согласно рекомендую Документация Отказ

Если вы хотите пропустить эти два дополнительных шага, вы можете просто использовать Тема опоры внутри вашего компонента.

// View/ThemedView.js
// @flow
import React from 'react';
import { View as RNView } from 'react-native';

type Props = {
  children: React.ReactNode,
  theme: Object,
  style: ?Object,
};

const ThemedView = ({
  children,
  style,
  theme,
  ...props
}: Props) => (
  
    {children}
  
);

export default ThemedView;

Использование нашего тематического компонента

Чтобы проверить его, я определил тему с двумя основными цветами:

const themes = {
  chaid: {
    text: 'white',
    bg: 'steelblue',
  },
};

// ...

Теперь тесты.

Рассмотрим как rnview и rntext the Реагистративно Компоненты пакета. Просмотр и текст из моего исходного кода.

  1. По умолчанию реагируют родной текст и просмотр

  Hey Hey!
a1.png.png.
  1. По умолчанию реагируют родной текст и наш пользовательский вид непечатанный

  Hey Hey!

Тот же результат, что и выше. Оказывает простое реагированное мнение.

A2.PNG.
  1. Наш пользовательский тематический вид и пользовательский тематический текст.

  Hey Hey!

Намного лучше.

a3.png.

Пользовательский тематический текстовый компонент определяется с использованием той же методики, описанных в вышеуказанных разделах.

Обертывание

Есть несколько пакетов для тематических действий для реагирования народа на NPM. Реагистрационная тема , Например.

Я не использовал ни одного из тех, потому что я думал, что могу многому научиться, создавая свою собственную тему архитектуру и свои собственные компоненты. И да! Это сработало. Я многому научился от этого.

Это не только применимо для реагирования на родных. Некоторый небольшой рефакторинг, вы сможете запустить его с реагированием в Интернете.

Если у вас есть какие-либо предложения, нашли Ошибка В тексте или просто хотите поделиться своими мыслями, пожалуйста, оставьте комментарий. Я буду рад ответить.

Спасибо за чтение!

Первоначально опубликовано на среднем и адаптирован для кодамента.

Читайте ещё по теме: