React Native 内联样式与 Stylesheet.create

Question

我今天遇到了一个问题。我想确保我的应用看起来不错，这需要我进行大量调整，尤其是在边距/填充部分。

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

我知道创建样式表可能是更好的方法。但是为了适应继承的样式，我将使用 style={[myComponentStyle, passedDownParentStyle]}

有这方面的专家能给我一些见解吗？

编辑 示例：

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（即道具一的组合地图和组件的默认地图） .