React Native 将更多道具传递给样式答案

【问题标题】：React Native pass more props to styleReact Native 将更多道具传递给样式
【发布时间】：2020-09-02 03:28:19
【问题描述】：

我正在尝试使组件更灵活，但我找不到将更多属性传递给我认为这可行但没有任何方法的样式， ... 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;

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

看起来你在 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}} />

如果您想继续使用问题中的其余运算符，则必须传递每个样式道具，例如：

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

无论哪种方式，都没有理由克隆 moreStyles 属性。

【讨论】：

【解决方案2】：

这样的东西有用吗？

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

或者像这样的循环

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

Here's an article which describes mergin JSON objects, 这就是样式

【讨论】：

这要求您为moreStyles 提供默认值，以防它不作为道具传递。向组件添加循环也没有任何意义，因为如果您将数组传递给 Views 样式属性，RN 已经为您执行此操作。