React Native中如何像Sass一样使用全局样式变量？

Hey there! I totally get where you're coming from—bringing that familiar Sass workflow into React Native makes perfect sense. Reusing global variables for colors, fonts, and spacing keeps your styles consistent and makes updates way easier. Let me walk you through a few solid ways to achieve this:

1. Native JavaScript Objects (No Extra Dependencies) #

This is the simplest approach since React Native styles are written in JavaScript anyway. You can create a dedicated constants file to store all your global style values, then import them wherever you need them.

Step 1: Create a global constants file #

Make a file like styles/constants.js:

// styles/constants.js
export const COLORS = {
  fontColor: 'red',
  primary: '#2196F3',
  secondary: '#FFC107',
  background: '#F5F5F5'
};

export const SPACING = {
  small: 8,
  medium: 16,
  large: 24
};

export const FONTS = {
  body: {
    fontSize: 16,
    fontFamily: 'System'
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold'
  }
};

Step 2: Use the variables in your styles #

Import the constants into any component or style file:

// components/MyTextComponent.js
import { StyleSheet, Text } from 'react-native';
import { COLORS, FONTS, SPACING } from '../styles/constants';

const styles = StyleSheet.create({
  paragraph: {
    color: COLORS.fontColor,
    ...FONTS.body,
    marginBottom: SPACING.medium
  }
});

export default function MyTextComponent() {
  return <Text style={styles.paragraph}>Hello, React Native!</Text>;
}

2. Use Sass with React Native (If You Prefer Sass Syntax) #

If you want to stick with Sass variables and partials, you can set up a Sass transformer to process .scss files in your RN project.

Step 1: Install dependencies #

First, install the required packages:

npm install react-native-sass-transformer sass --save-dev

Step 2: Configure Metro #

Update your metro.config.js to tell Metro how to handle Sass files:

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const config = {};

module.exports = mergeConfig(getDefaultConfig(__dirname), config, {
  transformer: {
    babelTransformerPath: require.resolve('react-native-sass-transformer')
  },
  resolver: {
    sourceExts: [...getDefaultConfig(__dirname).resolver.sourceExts, 'scss', 'sass']
  }
});

Step 3: Create global Sass variables #

Make a partial file like styles/_variables.scss:

// styles/_variables.scss
$fontColor: red;
$primary: #2196F3;
$spacing-medium: 16px;

Step 4: Import and use variables in Sass files #

Create a base styles file (like styles/base.scss) and import your variables:

// styles/base.scss
@import './variables';

.paragraph {
  color: $fontColor;
  margin-bottom: $spacing-medium;
  font-size: 16px;
}

Then import the compiled styles into your component:

// components/MyTextComponent.js
import { Text } from 'react-native';
import styles from '../styles/base.scss';

export default function MyTextComponent() {
  return <Text style={styles.paragraph}>Hello with Sass!</Text>;
}

3. CSS-in-JS with Styled Components (For Themed Apps) #

If you're using a CSS-in-JS library like styled-components, you can set up a global theme that all your styled components can access.

Step 1: Create a theme file #

Make styles/theme.js:

// styles/theme.js
export const theme = {
  colors: {
    fontColor: 'red',
    primary: '#2196F3'
  },
  fonts: {
    body: '16px System',
    heading: '24px System'
  }
};

Step 2: Wrap your app with ThemeProvider #

In your root App.js, wrap your entire app with the ThemeProvider from styled-components:

import { ThemeProvider } from 'styled-components/native';
import { theme } from './styles/theme';
import MyTextComponent from './components/MyTextComponent';

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <MyTextComponent />
    </ThemeProvider>
  );
}

Step 3: Use theme variables in styled components #

Create a styled component that references the theme:

// components/MyTextComponent.js
import styled from 'styled-components/native';

const Paragraph = styled.Text`
  color: ${props => props.theme.colors.fontColor};
  font-size: ${props => props.theme.fonts.body};
`;

export default function MyTextComponent() {
  return <Paragraph>Hello with Styled Components!</Paragraph>;
}

Which Should You Choose? #

• Native JS Objects: Best for beginners or projects that want to avoid extra dependencies. Super straightforward.
• Sass: Great if you already know Sass and want to keep that workflow. Adds a bit of setup but feels familiar.
• Styled Components: Perfect if you're building a themed app or prefer CSS-in-JS. Makes theming dynamic and easy to manage.

内容的提问来源于stack exchange，提问作者Maurice