风格化系统内联风格在React Native中是一个好习惯吗?

时间:2019-11-18 17:48:46

标签: react-native styled-components

我想知道将内联样式与react-native一起使用,但使用样式化组件和样式化系统。我在上一个项目中使用了顺风,我认为内联样式确实有助于提高可读性和生产率。 考虑到我在RN环境中找不到任何使用此方法的库,因此我希望有不同的意见。 您认为在React Native中使用这种方法会发生什么弊端?

这里是一个例子:

import styled from 'styled-components/native';
import * as styledSystem from 'styled-system';
import { ReactNode } from 'react';

interface StyledViewProps {
  children: ReactNode | Element[];
  height?: string | number;
  width?: string | number;
  flex?: number;
  p?: string;
  pl?: number;
  pt?: number;
  pr?: number;
  m?: number[] | string;
  mr?: number;
  ml?: number;
  mt?: number;
  mb?: number;
  justifyContent?: string;
  alignItems?: string;
  background?: string;
  borderRadius?: number | string;
  overflow?: string;
}

export const StyledView = styled.View<StyledViewProps>`    
  ${styledSystem.width}
  ${styledSystem.height}  
  ${styledSystem.margin}
  ${styledSystem.paddingBottom}
  ${styledSystem.paddingRight}
  ${styledSystem.paddingTop}
  ${styledSystem.paddingLeft}
  ${styledSystem.flex}   
  ${styledSystem.marginBottom}
  ${styledSystem.marginLeft}
  ${styledSystem.marginTop}
  ${styledSystem.background}
  ${styledSystem.overflow}
`;

通过使用这种方法,我最终将避免创建许多行重复的代码,并允许开发人员在阅读组件说明性代码的同时检查样式。 到目前为止,我仍然找不到很多缺点。

0 个答案:

没有答案