React Native StyleSheet中如何样式化嵌套元素？

嗨，这个问题我之前也踩过坑！React Native的StyleSheet和Web端的CSS-in-JS（比如你用的JSS）确实不一样，它不支持像& svg这种嵌套选择器语法——毕竟React Native的样式系统是基于组件属性的，不是DOM的选择器模型。不过别担心，有几种替代方案能帮你实现类似需求，不用给每个SVG都手动加style属性：

方案一：定义独立样式+封装子组件 #

先在StyleSheet里单独定义导航栏和SVG的样式，然后把导航里的SVG封装成一个复用组件，这样就不用每次都写style了：

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

const styles = StyleSheet.create({
  nav: {
    fontSize: 24,
    flexDirection: 'row',
    color: '#fff',
    marginTop: 24,
    marginLeft: 16,
  },
  navSvg: {
    marginLeft: 12,
  },
});

// 封装导航专用的SVG组件
const NavSvg = (props) => {
  return <YourSvgComponent style={[styles.navSvg, props.style]} {...props} />;
};

// 使用的时候直接调用封装好的组件
const Navigation = () => {
  return (
    <View style={styles.nav}>
      {/* 其他导航元素 */}
      <NavSvg />
      <NavSvg />
    </View>
  );
};

这样所有导航栏里的SVG都会自动应用navSvg样式，还能通过props.style覆盖或追加样式，灵活性拉满。

方案二：用支持嵌套语法的第三方CSS-in-JS库 #

如果你特别习惯Web端的嵌套写法，可以试试styled-components/native或者emotion/native这类库，它们支持类似CSS的嵌套语法，和你用JSS的方式几乎一致：

import styled from 'styled-components/native';
import YourSvgComponent from './YourSvgComponent';

const NavContainer = styled.View`
  font-size: 24px;
  flex-direction: row;
  color: #fff;
  margin-top: 24px;
  margin-left: 16px;

  ${YourSvgComponent} {
    margin-left: 12px;
  }
`;

// 使用时直接把SVG放进容器里
const Navigation = () => {
  return (
    <NavContainer>
      {/* 其他导航元素 */}
      <YourSvgComponent />
      <YourSvgComponent />
    </NavContainer>
  );
};

这种方式不用额外封装组件，直接靠选择器嵌套就能搞定，适合从Web端迁移过来的开发者。

小总结 #

React Native原生StyleSheet确实没有嵌套选择器，但通过组件封装或者第三方CSS-in-JS库，完全能实现你想要的“给父容器内的所有SVG统一加样式”的效果。而且组件封装的方式其实更符合React Native组件化的设计思路，后期维护起来也更清晰~

内容来源于stack exchange