Question

我正在处理使用大量字体的大型应用程序。我想在应用程序中设置所有类型的排版样式，以便于重复使用。请建议我该怎么做。这是我的代码。是h6，bodyFont具有有意义的命名空间，如果没有，请帮助我定义字体。

// global styles
'use strict';
import { StyleSheet } from "react-native";
import { colors, fontSize, font, fontWeight } from "./base";

const styles = StyleSheet.create({
   // font color helepers styles
   textPrimary: {
      color: colors.primary
   },
   textMuted: {
      color: colors.lightenGrey
   },
   // font helepers styles
   bodyFont: {
      color: colors.grey,
      fontFamily: font
   },
   fontWeightBold: {
      fontWeight: fontWeight.bold
   },
   fontWeightLight: {
      fontWeight: fontWeight.light
   },
   fontSm: {
      fontSize: fontSize.sm
   },
   fontXs: {
      fontSize: fontSize.xs
   },
   fontMd: {
      fontSize: fontSize.md
   },
   fontLg: {
      fontSize: fontSize.lg
   },
   fontXl: {
      fontSize: fontSize.xl
   },
   fontXxl: {
      fontSize: fontSize.xxl
   },
   // text alignment helepers
   textCenter: {
      textAlign: "center"
   },
   // margin heleper styles
   mb10: {
      marginBottom: 10
   },
   mt30: {
      marginTop: 30
   },
   mb30: {
      marginBottom: 30
   },
   mr20: {
      marginRight: 20
   },
   // typography
   body: {
      color: colors.grey,
      fontFamily: font,
      fontSize: fontSize.sm,
      fontWeight: fontWeight.light,
      marginBottom: 10
   },
   h6: {
      color: colors.grey,
      fontFamily: font,
      fontSize: fontSize.sm,
      fontWeight: fontWeight.bold,
      marginBottom: 10
   },
   avatar: {
      width: 60,
      height: 60,
      borderRadius: 30
   }
});

export default styles;

Answer 1

我认为您的代码正确。现在要使用它，只需将该组件导入要使用的位置即可。

例如：

import StylesText from 'yourpathhere';
.....
<Text style {StylesText.textPrimary}>{'Hello world'}</Text>

什么是在React Native App中进行排版命名间隔的最佳方法

1 个答案: