React Native StyleSheet优化

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的注释