在 react-native 中的每个样式组件周围添加边框？答案

【问题标题】：Add a border around every styled-component in react-native?在 react-native 中的每个样式组件周围添加边框？
【发布时间】：2020-01-28 23:57:38
【问题描述】：

通常，在 react 原生组件的创建阶段，我们会添加border-width 以准确查看组件在屏幕上的布局位置。

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;
`;

是否有一种全局方法可以为每个样式组件添加边框（或其他样式），并且能够轻松打开/关闭它？

这将大大加快我们的开发时间。

【问题讨论】：

尼克的回答似乎是一个不错的选择，但如果你只是想快速解决它，你可以将它添加到样式组件的父容器中 > * {border-width: 2px; }
@Emma 这似乎是一个不错的选择，但我遇到了Node of type rule not supported as an inline style。也许这在react-native 中是不可能的？
hmm 这很奇怪，我对react-native 不太熟悉，但也许它与嵌套选择器有关。您是否尝试过在开头包含 & 的规则？ & > * { border-width: 2px; } 或 & * { border-width: 2px; } ?
是的...经过验证的选择器在 react-native 中不可用。
@Emma RN 没有 CSS。它只有样式属性，没有选择器。

【解决方案1】：

你可以这样做：

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

然后用ThemeProvider 包装你的应用一次，而不是使用View 或styled.View 使用DebuggableView。

【讨论】：

谢谢@Nick。虽然这不是一个很好的解决方案，但我认为这是唯一的一个。 ? 一个更通用的方法（视图不是唯一带有边框的东西）是简单地使用您的border-width 代码，将您的最后一个0px 更改为实际边框应该是什么，以及它会影响的任何组件。无需创建全新的 View 类型。
@GollyJer 我建议的视图中的想法是它带有内置的边框（或您需要显示的任何内容以进行调试）。
任何有自己的边框的组件都会覆盖调试的。
是的...我想要一种方法来覆盖所有边界，即使它们存在。无论如何......你的答案是正确的。现在我只需将border-width: ${({ theme }) => (theme.debug ? '1px' : '3px')}; 添加到所有带有边框的组件中。第一个数字是调试大小，第二个是实际大小。然后，当我在主题中设置debug: true 时，所有内容都会获得 1px 边框。谢谢！