gpt4 book ai didi

react-native - React Native 内联样式与 Stylesheet.create

转载 作者:行者123 更新时间:2023-12-04 05:21:01 24 4
gpt4 key购买 nike

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

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

我知道创建样式表可能是更好的方法。但是为了适应继承的样式,我将使用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 的目的?我不应该根本不使用它吗?

最佳答案

来自 React Native 文档:

Code quality:

  • By moving styles away from the render function, you're making the code easier to understand.
  • Naming the styles is a good way to add meaning to the low level components in the render function.

Performance:

  • Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
  • It also allows to send the style only once through the bridge. All subsequent uses are going to refer an id (not implemented yet).

这就是我对创建 Stylesheet 的原因的理解。是一种更好的方法。
现在回答你的问题:
我认为您可以传递样式图,将其与组件样式图结合起来,然后从两者的组合中创建样式表。或者,您可以将任何传递下来的样式视为对默认组件样式的覆盖,并将其中的每一个设置为 Stylesheet相反(因为它只会使用其中一个)。但是,如果子组件应该由父组件包装,则您可能根本不必执行任何此操作,因为样式可能已经被继承。 ( 编辑 :这是错误的,所以忽略这部分)
如果您可以通过一些额外的代码提供更多上下文,我也许可以提供更多的见解。
更新 :
您也可以使用 StyleSheet.flatten (见 here)。但是,它带有以下警告:

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

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


就像我之前说的,你可能想先把 map 作为 Prop 传递下去,然后再做 Stylesheet.create。在展平的 map 上(即, Prop 一的组合 map 和组件的默认 map )。

关于react-native - React Native 内联样式与 Stylesheet.create,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42508575/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com