ReactNative 内联样式与 Stylesheet.create [英] ReactNative inline style vs Stylesheet.create

问题描述

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

I ran into a problem today. I wanna make sure my app looks good and that requires me to do a lot of tuning especially in margin/padding part.

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

My question is: Which approach better? Create multiple stylesheets (on the parent component) just to accommodate these little changes (i'm using reusable components with margin-less stylesheets, those margins will be inherited from parent component) OR just let it be inlined on the component?

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

I know that creating stylesheet would likely be the better approach. But then to accommodate that inherited styles, I will use style={[myComponentStyle, passedDownParentStyle]} <- doesn't it will create a new stylesheet nevertheless and by then nullify the purpose of using Stylesheet.create in the first place?

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

Could anyone expert on this give me some insight?

编辑示例:

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 的目的无效吗?难道我根本不应该使用它吗?

UPDATE My question is: Isn't the usage of style={[Style.child, this.props.style]} nullify the purpose of Stylesheet.create? Shouldn't I just not use it at all instead?

推荐答案

来自 React Native 文档:

From the React Native docs:

代码质量:

• 通过将样式从渲染函数中移开，您可以使代码更易于理解.
• 命名样式是为渲染函数中的低级组件添加含义的好方法.

性能:

• 从样式对象制作样式表可以通过 ID 引用它，而不是每次都创建一个新的样式对象.
• 它还允许仅通过桥发送一次样式.所有后续使用都将引用一个 id(尚未实现).

这就是我对为什么创建 Stylesheet 是更好方法的理解.

So that's my understanding of why creating a Stylesheet is a better approach.

现在回答您的问题:

我认为您可以传递样式图，将其与组件样式图相结合，然后从两者的组合中创建样式表.或者，您可以将任何传递下来的样式视为对默认组件样式的覆盖，并将它们中的每一个改为 Stylesheet(因为它只会使用一种或另一种).但是，如果子组件应该由父组件包装，则您可能根本不需要这样做，因为样式可能已经被继承了.(编辑:这是错误的，所以忽略这部分)

I think you could pass down a map of styles, combine that with a map of your component styles, and create a stylesheet from the combination of the two. Alternatively, you could treat any passed down styles as an override to the default component styles and just make each of those a Stylesheet instead (since it would only use one or the other). If the child is supposed to wrapped by the parent component, however, you may not have to do any of this at all as the styles may be inherited already. (Edit: This is wrong, so ignore this part)

如果你能用一些额外的代码提供更多的上下文，我也许可以提供更深入的见解.

If you could provide more context with some additional code, I may be able to provide greater insight.

更新:

您也可以使用 StyleSheet.flatten(参见 此处).但是，它带有以下警告:

You could also use StyleSheet.flatten (see here). However, it comes with the following warning:

注意:请谨慎使用，因为滥用此功能会在优化方面给您带来负担.

NOTE: Exercise caution as abusing this can tax you in terms of optimizations.

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

IDs enable optimizations through the bridge and memory in general. Refering to style objects directly will deprive you of these optimizations.

就像我之前说的，您可能希望先将地图作为道具传递，然后在展平的地图(即道具的组合地图)上执行 Stylesheet.create和组件的默认值).

Like I said earlier, you'd probably want to pass down the map instead first as a prop and then do Stylesheet.create on the flattened map (i.e., the combined map of the prop one and the default for the component).

这篇关于ReactNative 内联样式与 Stylesheet.create的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！