如何将Web端指定CSS规则转换为React Native可实现的对应样式

React Native 没有 Web CSS 中的后代选择器、多类名组合匹配能力，所以我们需要通过父组件参数动态控制子组件样式，来实现和原 CSS 完全一致的逻辑。

实现思路 #

• 先定义所有需要的基础样式
• 父容器通过参数标识自身类型（parent-1/parent-2）
• 子组件根据父容器的类型，动态绑定匹配的背景样式

完整可运行代码示例 #

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

// 统一定义基础样式
const styles = StyleSheet.create({
  parent: {
    // 可在此处添加父容器通用样式，比如内边距、圆角等
    padding: 16,
    gap: 8
  },
  subText: {
    fontSize: 16,
    padding: 8
  },
  bgYellow: {
    backgroundColor: 'yellow'
  },
  bgRed: {
    backgroundColor: 'red'
  }
});

// 业务调用，对应你给出的HTML结构示例
const App = () => {
  // 父容器类型，可根据业务需求切换为 'parent-2'
  const currentParentType = 'parent-1';

  return (
    <View style={styles.parent}>
      {/* sub-class-1 样式匹配逻辑 */}
      <Text 
        style={[
          styles.subText,
          currentParentType === 'parent-1' ? styles.bgYellow : styles.bgRed
        ]}
      >
        Test1
      </Text>
      {/* sub-class-2 样式匹配逻辑 */}
      <Text 
        style={[
          styles.subText,
          currentParentType === 'parent-2' && styles.bgRed
        ]}
      >
        Test2
      </Text>
    </View>
  );
};

export default App;

效果验证 #

当currentParentType设为parent-1时，Test1背景为黄色、Test2无特殊背景，和你给出的示例效果一致；如果切换为parent-2，两个文本的背景都会变成红色，完全匹配原CSS规则。

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