我以这种方式定义样式:
const styles = StyleSheet.create({
container: {},
tabContent: {
alignItems: "flex-start",
flexDirection: "column",
padding: 21
},
tabHeader: {
flex: 0,
fontSize: 10,
paddingTop: 10,
},
tabText: {
flex: 0,
fontSize: 14,
paddingTop: 10,
textAlign: "left"
},
})
但是,有一次我忘记使用StyleSheet.create并使用了普通对象:
const styles = {
container: {},
tabContent: {
alignItems: "flex-start",
flexDirection: "column",
padding: 21
},
tabHeader: {
flex: 0,
fontSize: 20,
paddingTop: 10,
},
tabText: {
flex: 0,
fontSize: 14,
paddingTop: 10,
textAlign: "left"
},
}
令人惊讶的是它有效。 是否需要使用StyleSheet.create来定义样式,还是可以使用普通对象?
答案 0 :(得分:10)
我认为最好尽可能使用StyleSheet
,因为它比使用常规对象更高效。
来自React Native Docs:
性能:
- 从样式对象制作样式表可以通过ID引用它,而不是每次都创建一个新的样式对象。
- 它还允许仅通过桥发送一次样式。所有后续用途都将引用一个id(尚未实现)。
请记住在某个地方看到某些内容(认为这是一个github问题)并提出类似的问题,有人说使用StyleSheet
来提高性能仍然会更好。
希望这有帮助!
答案 1 :(得分:0)
不完全是你问题的答案,但是FWIW
有区别。您无法从StyleSheet.create
连续(传播或分配)样式,因为react-native
会抛出。
看起来StyleSheet.create
会返回任何内容,但不会返回JS对象。如果您尝试从StyleSheet.create
连接两个样式,react-native
将生成RebBox。
示例:
const css = StyleSheet.create( {
btn: { color: 'blue' },
mb10: { marginBottom: 10 }
} )
render() {
// I want to concat styles using spread or assign
let btnClass = { ...css.btn, ...css.mb10 }; // spread
let btnClass = Object.assign({},css.btn, css.mb10); // plain'ol assign
return (
<Button style={btnClass} />
)
}
但react-native
突然抛出TypeError
。由于某种原因,来自StyleSheet.create
的样式不属于对象。
TypeError:在此环境中,assign的源必须是一个对象......
答案 2 :(得分:-1)
除非@David指的是编译期间发生的事情,否则我相信这里的文档
从样式对象制作样式表可以引用 它通过ID而不是每次都创建一个新的样式对象。
指的是在您的代码中手动添加style={{ ... }}
。
通过简单地将样式对象导入任意组件文件,很容易避免重复使用样式对象,甚至跨文件。
就个人而言,我更喜欢使用普通对象,因此我可以编写样式对象,例如style={Object.assign({}, style1, { color })}
StyleSheet
答案 3 :(得分:-2)
错误的方式是不同的。
使用StyleSheet.create
,您将收到红屏错误提示:
const styles = StyleSheet.create({
container: {
flexDirection:"row",
alignItems:"center",
fontSize:"20",//error
}
});
没有用StyleSheet.create
,你会收到警告:
const styles = {
container: {
flexDirection: "row",
alignItems: "center",
fontSize: "20", //error
}
};