ReactNative内联样式与Stylesheet.create

Question

我今天遇到了一个问题.我想确保我的应用程序看起来很好,这需要我做很多调整,特别是在margin/padding部分.

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

我知道创建样式表可能是更好的方法.但是为了适应那些继承的样式,我将使用 style={[myComponentStyle, passedDownParentStyle]}< - 它不会创建一个新的样式表,然后首先取消使用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(见这里).但是,它附带以下警告:

注意:请谨慎行事,因为滥用此功能会使您在优化方面受到重视.

ID通常通过桥接和内存实现优化.直接引用样式对象将剥夺您的这些优化.

就像我之前说过的那样,你可能想要首先传递地图而不是首先作为道具,然后Stylesheet.create在平坦的地图上(即,道具1和组件的默认组合地图)进行传递.