Добавить рамку вокруг каждого стилевого компонента в Reaction-native? - PullRequest
Новая
       65

Добавить рамку вокруг каждого стилевого компонента в Reaction-native?

1 голос
/ 29 января 2020

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

export const ScreenContainer = styled.View`
  border-width: 2px;
  flex: 1;
  padding-horizontal: 36px;
`;

Затем, когда закончим, мы закомментируем границу. Компонентов может быть 10. 

export const ScreenContainer = styled.View`
  /* border-width: 2px; */
  flex: 1;
  padding-horizontal: 36px;
`;

Существует ли глобальный способ добавить границу (или другой стиль) к каждому стилевому компоненту с возможностью его простого включения / выключения?

Это значительно ускорит время разработки.

1 Ответ

1 голос
/ 29 января 2020

Вы можете сделать это: 

const DebuggableView = styled.View`
  border-width: ${({ theme }) => theme.debug ? '2px' : '0'};
`

Затем оберните ваше приложение один раз ThemeProvider и вместо простого View или styled.View используйте DebuggableView.

...