React Native StyleSheets全局设计常量

d8tt03nd 于 2023-10-22 发布在 React

关注(0)|答案(1)|浏览(115)

我想知道是否有某种方法可以设置全局设计常量，以在React Native样式表中使用。
当我使用样式化组件时，我可以设置类似于
TextInput.tsx

import React from 'react';
import {TextInputProps} from 'react-native';
import {Label} from './TextInputStyle';

interface ITextInputProps extends TextInputProps {
  label?: string;
}

const TextInput = ({label}: ITextInputProps) => {
  return (
      <Label>{label}</Label>
  );
};

export default TextInput;

TextInputStyle.ts

export const Label = styled.Text`
  ${Body};
  align-self: flex-end;
`;

typography.ts

export const Body = css`
  font-family: 'Rubik-Regular';
  font-size: 16px;
  line-height: 22px;
  color: ${DarkGrey2};
`;

我创建了这个Body样式作为全局常量，我可以在我的样式组件中使用它。我想知道我是否可以用我的React Natvie Stylesheets做类似的事情。
而不是像这样做：

const styles = StyleSheet.create({
  root: {
    display: 'flex',
    flexDirection: 'row',
    paddingVertical: 21,
    textAlign: 'center',
    alignItems: 'center',
  },
});

我能做到这

const styles = StyleSheet.create({
  root: {
   ${flexCenterRow}
    paddingVertical: 21,
  },
});

globalstyles.ts

export const flexCenterRow = {
    display: 'flex',
    flexDirection: 'row',
    textAlign: 'center',
    alignItems: 'center',
}

react-native

来源：https://stackoverflow.com/questions/77281893/react-native-stylesheets-global-design-constants

1条答案

按热度按时间

du7egjpx1#

我认为你可以在React Native中实现全局设计常量，方法是为你的全局样式创建一个单独的文件（你已经这样做了），然后在你的组件中导入和使用这些样式。我的想法是：
创建全局样式文件：

// globalStyles.ts
export const flexCenterRow = {
  display: 'flex',
  flexDirection: 'row',
  textAlign: 'center',
  alignItems: 'center',
};

然后导入要使用的全局样式：

// TheComponent.ts
import React from 'react';
import { StyleSheet, View } from 'react-native';
import { flexCenterRow } from './globalStyles';

const styles = StyleSheet.create({
  root: {
    ...flexCenterRow,
    paddingVertical: 21,
  },
});

const YourComponent = () => {
  return (
    <View style={styles.root}>
      {/* Your component code */}
    </View>
  );
};

export default TheComponent;

在样式对象中，我们可以使用扩展操作符（...）将globalStyles.ts文件中的flexCenterRow属性合并到组件的特定样式对象中。

赞(0）回复(0）举报 2023-10-22

我来回答

React Native StyleSheets全局设计常量

1条答案

相关问题

热门标签

最新问答