Блог

Я пытаюсь сделать компонент более гибким, но я не могу найти способ передать больше свойств стилю, я думал, что это сработает, но ничего, … morestyles для моего контейнера.

     import React from "react";
    import { StyleSheet, View, Text } from "react-native";
    
    // component
    import Radio from "../components/Radio";
    
    function RadioText({ color, title, ...**moreStyles** }) {
      return (
        <View style={[styles.container, { ...**moreStyles** }]}>
          <Radio color={color} />
          <Text style={styles.text}>{title}</Text>
        </View>
      );
    }
    
    const styles = StyleSheet.create({
      container: {
        flexDirection: "row",
      },
      text: {
        fontSize: 11,
      },
    });
    
    export default RadioText;
  

Похоже, что вы распространяете стили в props.

Изменить на:

 function RadioText({ color, title, moreStyles }) {
      return (
        <View style={[styles.container, moreStyles]}>
          <Radio color={color} />
          <Text style={styles.text}>{title}</Text>
        </View>
      );
}
  

Тогда использование было бы:

 <RadioText title="foo" color="red" moreStyles={{padding: 20}} />
  

Если вы хотите продолжать использовать оператор rest, как указано в вашем вопросе, вам придется передавать каждый реквизит стиля следующим образом:

 <RadioText title="foo" color="red" padding={20} />
  

В любом случае нет причин клонировать реквизит moreStyles.

Сработает ли что-то подобное?

 <View style={{...styles.container, ...moreStyles}}>
  

Или, может быть, цикл, подобный

 let style = styles.container
moreStyles.forEach((s) => {
    style = {...style, ...s}
})
  

Вот статья, в которой описывается объединение объектов JSON, какими будут стили