react-native - 如何在 native react 中从父 View 组件向所有子组件添加填充/边距？

Question

我想为我的所有子组件(Icon)添加相同的填充/边距，只是将样式放入 View 组件中。我怎样才能实现？

<View style={{flexDirection: "row",}}>
    <Icon name={'star'} color={Gold} size={14}/>
    <Icon name={'star'} color={Gold} size={14}/>
    <Icon name={'star'} color={Gold} size={14}/>
    <Icon name={'star'} color={Gold} size={14}/>
</View>

Answer 1

父级实际上可以修改其子级。看看下面的包装器组件:

const Wrapper = ({ childStyle, children, ...viewProps }) => (
  <View {...viewProps}>
    {React.Children.map((children, child) =>
      React.cloneElement(child, {
        style: [child.props.style, childStyle],
      }),
    )}
  </View>
);

// This will add margin to all your stars:
<Wrapper style={{flexDirection: "row",}} childStyle={{margin: 8}}>
    <Icon name={'star'} color={Gold} size={14}/>
    <Icon name={'star'} color={Gold} size={14}/>
    <Icon name={'star'} color={Gold} size={14}/>
    <Icon name={'star'} color={Gold} size={14}/>
</View>

这使用 React.Children.map 迭代给定 Wrapper 的子项，然后使用 React.cloneElement 转换它们并注入(inject)我们从父级传递的样式。