React Native能否使用CSS变量？是否有替代实现方案？

你需要的是让子组件根据容器定义的变量自动适配样式，类似Web中CSS变量的效果，以下是几种实用的实现方式：

方案一：React Context 实现（最贴近CSS变量的继承特性） #

这个方案能完美复刻你Web代码中「容器定义变量，子组件自动继承使用」的逻辑，无需手动传递props。

步骤1：创建Context #

import React, { createContext, useContext } from 'react';

// 创建样式变量的Context，设置默认值
const ContainerStyleContext = createContext({
  pTop: 15,
  pSide: 15,
});

// 自定义Hook简化子组件调用
export const useContainerStyles = () => useContext(ContainerStyleContext);

步骤2：实现容器组件 #

对应你Web中的.modal-small和.modal-large：

import { View, StyleSheet } from 'react-native';
import { ContainerStyleContext } from './ContainerStyleContext';

// 小型模态容器
export const ModalSmall = ({ children }) => {
  return (
    <ContainerStyleContext.Provider value={{ pTop: 15, pSide: 15 }}>
      <View style={styles.smallModal}>{children}</View>
    </ContainerStyleContext.Provider>
  );
};

// 大型模态容器
export const ModalLarge = ({ children }) => {
  return (
    <ContainerStyleContext.Provider value={{ pTop: 15, pSide: 30 }}>
      <View style={styles.largeModal}>{children}</View>
    </ContainerStyleContext.Provider>
  );
};

const styles = StyleSheet.create({
  smallModal: {
    paddingBottom: 30,
    width: 330,
    backgroundColor: '#FFF',
    borderRadius: 10,
    alignSelf: 'center',
    marginTop: 100,
  },
  largeModal: {
    paddingBottom: 30,
    width: 500,
    backgroundColor: '#FFF',
    borderRadius: 10,
    alignSelf: 'center',
    marginTop: 100,
  },
});

步骤3：实现可复用的子组件 #

对应你Web中的heading、paragraph等组件，通过自定义Hook获取容器变量：

import { View, StyleSheet } from 'react-native';
import { useContainerStyles } from './ContainerStyleContext';

export const Heading = () => {
  const { pTop, pSide } = useContainerStyles();
  return (
    <View 
      style={[
        styles.base,
        {
          marginTop: 2 * pTop,
          marginHorizontal: pSide,
          backgroundColor: 'red',
        }
      ]} 
    />
  );
};

export const Paragraph = () => {
  const { pTop, pSide } = useContainerStyles();
  return (
    <View 
      style={[
        styles.base,
        {
          marginTop: pTop,
          marginHorizontal: pSide,
          backgroundColor: 'green',
        }
      ]} 
    />
  );
};

export const ImageBox = () => {
  const { pTop, pSide } = useContainerStyles();
  return (
    <View 
      style={[
        styles.base,
        {
          marginTop: pTop,
          marginHorizontal: pSide,
          backgroundColor: 'blue',
        }
      ]} 
    />
  );
};

export const Dropdown = () => {
  const { pTop, pSide } = useContainerStyles();
  return (
    <View 
      style={[
        styles.base,
        {
          marginTop: pTop,
          marginHorizontal: pSide,
          backgroundColor: 'blue',
        }
      ]} 
    />
  );
};

const styles = StyleSheet.create({
  base: {
    height: 50,
  },
});

步骤4：使用组件 #

和Web的用法几乎一致：

import { View, StyleSheet } from 'react-native';
import { ModalSmall, ModalLarge } from './Modals';
import { Heading, Paragraph, ImageBox, Dropdown } from './Components';

export default function App() {
  return (
    <View style={styles.container}>
      <ModalSmall>
        <Heading />
        <Paragraph />
        <ImageBox />
        <Dropdown />
        <Heading />
      </ModalSmall>

      <ModalLarge>
        <Heading />
        <Paragraph />
        <ImageBox />
        <Dropdown />
        <Heading />
      </ModalLarge>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#333',
  },
});

方案二：Props 传递变量（简单直接，适合小型场景） #

如果你的组件层级不深，直接通过props传递容器变量是最直观的方式：

容器组件 #

import React from 'react';
import { View, StyleSheet } from 'react-native';

export const ModalSmall = ({ children }) => {
  const containerVars = { pTop: 15, pSide: 15 };
  // 遍历子组件并传递变量props
  const styledChildren = React.Children.map(children, child => {
    if (React.isValidElement(child)) {
      return React.cloneElement(child, containerVars);
    }
    return child;
  });

  return <View style={styles.smallModal}>{styledChildren}</View>;
};

const styles = StyleSheet.create({
  smallModal: {
    paddingBottom: 30,
    width: 330,
    backgroundColor: '#FFF',
    borderRadius: 10,
    alignSelf: 'center',
    marginTop: 100,
  },
});

子组件 #

import { View } from 'react-native';

export const Heading = ({ pTop, pSide }) => {
  return (
    <View 
      style={{
        height: 50,
        marginTop: 2 * pTop,
        marginHorizontal: pSide,
        backgroundColor: 'red',
      }} 
    />
  );
};

这个方案的缺点是如果子组件嵌套多层，需要层层传递props，不如Context优雅。

方案三：React Native 原生CSS变量（有限支持） #

React Native 0.68+ 开始支持CSS变量，你可以在StyleSheet中使用var()语法，但需要注意：

1. 变量需要在父组件的style中定义（通过--变量名: 值）
2. 子组件的样式中使用var(--变量名, 默认值)

示例代码 #

// 容器组件
import { View } from 'react-native';

export const ModalSmall = ({ children }) => {
  return (
    <View 
      style={{
        '--p-top': 15,
        '--p-side': 15,
        // 容器自身样式
        paddingBottom: 30,
        width: 330,
        backgroundColor: '#FFF',
        borderRadius: 10,
        alignSelf: 'center',
        marginTop: 100,
      }}
    >
      {children}
    </View>
  );
};

// 子组件
import { View } from 'react-native';

export const Heading = () => {
  return (
    <View 
      style={{
        height: 50,
        marginTop: 'calc(2 * var(--p-top))',
        marginHorizontal: 'var(--p-side)',
        backgroundColor: 'red',
      }} 
    />
  );
};

注意：这个方案的兼容性有限，且calc()的支持不如Web完善，部分复杂计算可能无法生效，适合简单场景。

内容的提问来源于stack exchange，提问作者Dale de Silva