react-native - 在 React Native 应用程序中使用排版命名空间的最佳方法是什么

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;

标签： react-nativenamespacesstyles

Answer 1

我认为你有正确的代码。现在要使用它，只需在要使用它的地方导入该组件。

例如：

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