React Native样式表变量疑问：能否添加全局变量？

Hey David, let's break down your questions about React Native StyleSheet variables and global styles—super common stuff that'll make your styling way cleaner and more consistent!

1. Using Variables in StyleSheet #

There are a few straightforward, practical ways to use variables in your React Native styles. Here are the most common approaches:

a. Basic JavaScript Variables #

Define reusable values (like colors, spacing, or font sizes) outside the StyleSheet.create() call, then reference them directly. This keeps your styles DRY and easy to update:

import { StyleSheet } from 'react-native';

// Define your variables first
const PRIMARY_COLOR = '#2196F3';
const PADDING_SMALL = 8;
const FONT_SIZE_BODY = 16;

const styles = StyleSheet.create({
  container: {
    backgroundColor: PRIMARY_COLOR,
    padding: PADDING_SMALL,
  },
  bodyText: {
    fontSize: FONT_SIZE_BODY,
    color: '#333',
  },
});

b. Reuse Styles Within the Same StyleSheet #

You can reference other styles inside the same StyleSheet object using styles.styleName—perfect for inheriting base styles and tweaking them:

const styles = StyleSheet.create({
  baseButton: {
    padding: 12,
    borderRadius: 4,
    borderWidth: 1,
  },
  primaryButton: {
    ...styles.baseButton, // Spread the base styles
    backgroundColor: PRIMARY_COLOR,
    borderColor: PRIMARY_COLOR,
  },
  secondaryButton: {
    ...styles.baseButton,
    backgroundColor: '#fff',
    borderColor: '#607D8B',
  },
});

c. Dynamic Variables (Props/State-Driven Styles) #

For styles that change based on component props or state, calculate the variable inline before passing to StyleSheet.create (or use inline styles sparingly—StyleSheet is better for performance):

const CustomButton = ({ isActive }) => {
  const buttonBg = isActive ? '#1976D2' : PRIMARY_COLOR;
  
  const styles = StyleSheet.create({
    button: {
      backgroundColor: buttonBg,
      padding: 12,
    },
  });

  return <TouchableOpacity style={styles.button} />;
};

2. Adding Global Variables/Styles in React Native #

Absolutely! Global styles are key for maintaining a consistent design system across your app. Here are the best practices:

a. Create a Dedicated Global Style File #

Make a separate file (like src/styles/GlobalStyles.js) to store all your global variables and reusable styles, then import them wherever you need:

// GlobalStyles.js
import { StyleSheet } from 'react-native';

// Global color palette
export const COLORS = {
  primary: '#2196F3',
  secondary: '#607D8B',
  textDark: '#333',
  textLight: '#fff',
};

// Global spacing system
export const SPACING = {
  xs: 4,
  sm: 8,
  md: 16,
  lg: 24,
};

// Reusable global styles
export const GLOBAL_STYLES = StyleSheet.create({
  screenContainer: {
    flex: 1,
    padding: SPACING.md,
    backgroundColor: '#fff',
  },
  centeredText: {
    textAlign: 'center',
    fontSize: 16,
    color: COLORS.textDark,
  },
});

Then import and use in your components:

import { COLORS, SPACING, GLOBAL_STYLES } from '../styles/GlobalStyles';

const HomeScreen = () => {
  return (
    <View style={GLOBAL_STYLES.screenContainer}>
      <Text style={{ ...GLOBAL_STYLES.centeredText, color: COLORS.primary }}>
        Welcome to the app!
      </Text>
    </View>
  );
};

b. Use a Theme Provider (For Themed Apps) #

If you want to support light/dark modes or dynamic themes, use a React Context provider to make global styles available to all components without repeated imports. Here's a simple custom implementation:

// ThemeContext.js
import React, { createContext, useContext } from 'react';
import { StyleSheet } from 'react-native';

const ThemeContext = createContext();

export const ThemeProvider = ({ children }) => {
  const theme = {
    colors: {
      primary: '#2196F3',
      background: '#fff',
      text: '#333',
    },
    styles: StyleSheet.create({
      screenContainer: {
        flex: 1,
        backgroundColor: '#fff',
      },
    }),
  };

  return (
    <ThemeContext.Provider value={theme}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = () => useContext(ThemeContext);

Wrap your root app component in the provider:

// App.js
import { ThemeProvider } from './ThemeContext';

const App = () => {
  return (
    <ThemeProvider>
      {/* All your app screens/components go here */}
    </ThemeProvider>
  );
};

Then access the theme in any component:

const ProfileScreen = () => {
  const theme = useTheme();
  
  return (
    <View style={theme.styles.screenContainer}>
      <Text style={{ color: theme.colors.primary }}>My Profile</Text>
    </View>
  );
};

c. Avoid Global Objects (Not Recommended) #

While you could attach variables to the global global object, this is generally bad practice—it pollutes the global namespace and makes debugging harder. Stick to the above methods for cleaner, more maintainable code.

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