Question

最有效的方法（为什么）？

“级联”样式：

export function Title({ children, small }) {
  return <Text style={[styles.title, small && styles.small]}>{children}</Text>;
}

const styles = StyleSheet.create({
  title: {
    fontFamily: "Roboto",
    fontWeight: "500",
    fontSize: 20
  },
  small: {
    fontSize: 14
  }
});

或独特的风格：

export function Title({ children, small }) {
  return (
    <Text style={small ? styles.titleSmall : styles.title}>{children}</Text>
  );
}

const title = {
  fontFamily: theme.fontFamily,
  fontWeight: "500"
};

const styles = StyleSheet.create({
  title: {
    ...title,
    fontSize: 20
  },
  titleSmall: {
    ...title,
    fontSize: 14
  }
});

给我自己的提示：http://wiki.c2.com/?PrematureOptimization

Answer 1

对于React Native，级联样式是最好的一种。

从样式对象制作样式表可以引用通过ID代替每次创建一个新样式对象。

您也可以尝试提取通用组件CSS，无论它们看起来多么简单，都避免一遍又一遍地定义内联样式。 Here是RN小组和媒体link的注解

响应本机StyleSheet优化

1 个答案: