我想知道将内联样式与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}
`;
通过使用这种方法,我最终将避免创建许多行重复的代码,并允许开发人员在阅读组件说明性代码的同时检查样式。 到目前为止,我仍然找不到很多缺点。