Question

我今天遇到了一个问题。我想确保我的应用程序看起来很好，这需要我做很多调整，特别是在边距/填充部分。

我的问题是：哪种方法更好？创建多个样式表（在父组件上）只是为了适应这些小变化（我使用可重复使用的组件和无边距样式表，这些边距将从父组件继承）或者只是让它在组件上内联？

我知道创建样式表可能是更好的方法。但是为了适应那些继承的风格，我会用 style={[myComponentStyle, passedDownParentStyle]}＆lt; - 它不会创建一个新的样式表，然后首先取消使用Stylesheet.create的目的吗？

这位专家可以给我一些见解吗？

修改例如：

const Style = Stylesheet.create({
 child: {
  color: 'red'
 },
 parent1: {
  padding: 5,
  margin: 10
 },
 parent2: {
  padding: 10,
  margin: 5
 }
})

class Child {
 render() {
  return (
   <Text style={[Style.child, this.props.style]}>
    {this.props.children}
   </Text>
  )
 }
}

class Parent1 {
 render() {
  return (
   <Child style={Style.parent1}>
    Hello
   </Child>
  )
 }
}

class Parent2 {
 render() {
  return (
   <Child style={Style.parent2}>
    World
   </Child>
  )
 }
}

更新我的问题是：style={[Style.child, this.props.style]}的使用是否取消了Stylesheet.create的用途？我不应该根本不使用它吗？

Answer 1

来自React Native文档：

代码质量：


通过将样式移离渲染功能，您可以更轻松地理解代码。

命名样式是为渲染函数中的低级组件添加含义的好方法。


性能：


从样式对象制作样式表可以通过ID引用它，而不是每次都创建一个新的样式对象。

它还允许仅通过桥发送一次样式。所有后续用途都将引用一个id（尚未实现）。

因此，我理解为什么创建Stylesheet是一种更好的方法。

现在回答你的问题：

我认为你可以传递一个样式图，将它与你的组件样式的地图相结合，并从两者的组合中创建一个样式表。或者，您可以将任何传递的样式视为对默认组件样式的覆盖，并将其中的每一个改为Stylesheet（因为它只使用一个或另一个）。 ~~但是，如果孩子应该由父组件包裹，则可能根本不必执行任何操作，因为样式可能已经继承。~~（编辑：这是错误的，所以忽略这部分）

如果您可以提供更多上下文以及其他一些代码，我可以提供更深入的见解。

<强>更新：

您也可以使用StyleSheet.flatten（请参阅here）。但是，它附带以下警告：

注意：请谨慎行事，因为滥用此功能可能会对您的优化产生负担。

ID通常可以通过桥接器和内存进行优化。直接引用样式对象将使您无法进行这些优化。

就像我之前说过的那样，你可能想要首先传递地图而不是作为道具，然后在展平地图上做Stylesheet.create（即道具1和默认地图的组合地图）对于组件）。

ReactNative内联样式与Stylesheet.create

1 个答案: