我将按以下方式分离样式:
styles /
|-- base.js
|-- base.ios.js
|-- base.android.js
它们中的每一个都导出一个如本例所示创建的StyleSheet组件:
import { StyleSheet } from 'react-native';
export default StyleSheet.create({
statusBar: {
height: 20
});
如何合并它们以便只有一个基本样式对象?我正在寻找类似的东西:
const baseStyles = mergeStyles(baseStyle, platformStyle);
5条答案
按热度按时间zaq34kh61#
你非常接近:
基本上,任何组件都可以级联样式如下:
ikfrs5lh2#
也可以使用
StyleSheet.flatten
方法。请参阅此处的文档。更新:
StyleSheet.flatten
内部使用StyleSheetRegistry。getStyleByID(style)解析ID表示的样式对象。ID通常通过桥和内存启用优化。直接引用样式对象将使您无法进行这些优化。因此,展平方法优于
style={ [ styles.listItem, styles.selectedListItem ] }
fnvucqvd3#
您可以使用展开操作符'组合样式表。..',则警告所有同名的变量将被最后一个示例覆盖。
这里有一个小的演示应用程序来演示:
编辑:
如果你正在运行ES 5,你可以用途:
const styles3 = Object。sort(sort,sort);
pwuypxnk4#
现在,ReactNative允许您使用更实用的方法合并两种样式。使用函数StyleSheet。编写,以便您可以按照文档执行以下操作:
azpvetkf5#
最好的方法是使用
StyleSheet.flatten
。举个例子
上面的代码将创建一个具有
styles.btn
属性以及红色的按钮。您还可以使用它在StyleSheet对象中合并多个样式,如: