组合作为道具传下来的样式

Question

如何将我的样式作为道具传递下去？使用以下代码不显示样式道具：

容器：

<StyledText
          text="Episode Overview"
          backgroundStyle={[styles.opacityBackground, { margin: 0 }]}
        />

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "column"
  },
  opacityBackground: { opacity: 0.8, backgroundColor: "#003333" },

});

组件

const StyledText = props => {
        let { text, backgroundStyle } = props;

        return (
            <View style={[styles.container, { ...backgroundStyle }]}>
                ...
            </View>
        );
    };

Answer 1

您应该将样式作为对象而不是数组传递

 <StyledText
      text="Episode Overview"
      backgroundStyle={{...styles.opacityBackground, margin: 0 }}
    />



const StyledText = props => {
    let { text, backgroundStyle } = props;

    return (
        <View style={{...styles.container, ...backgroundStyle }}>
            ...
        </View>
    );
};