Как добавить отступы / поля для всех дочерних компонентов из родительского компонента 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 для их преобразования и внедрения стилей, которые мы передаем родитель.

Answer 2

Добавить стилевую опору для каждого Icon

<Icon name={'star'} color={Gold} size={14} style={{ margin: 10 }} />

Редактировать: Не думаю, что вы можете установить маржу для родительского компонента. Если вы не хотите писать опору стиля 5 раз, вы можете создать пользовательский значок:

const CustomIcon = ({name, color, size}) => (
   <Icon name={name} color={color} size={size} style={{ margin: 10 }} />
)

, а затем вызвать этот компонент вместо Icon:

<CustomIcon name={'star'} color={Gold} size={14} />