React Native中如何更新自定义CardSection组件的单个样式属性

嘿，我懂你的困扰——想给自定义的CardSection组件调整单个样式属性，又不想重复写整个组件代码，但直接传style属性没生效对吧？这是因为你的组件目前没有把外部传入的样式和内部默认样式合并，所以传入的样式被完全忽略了。

问题根源 #

你的CardSection组件里，View只使用了内部定义的styles.containerStyle，完全没用到父组件传入的props.style，所以你传的justifyContent: 'space-between'根本没被应用上。

两种修复方案 #

下面是两种简单的解决方式，都能让你保留原有样式的同时覆盖指定属性：

方案1：使用样式数组合并（React Native推荐方式）

React Native支持将多个样式放在数组中，数组后面的样式会覆盖前面的冲突属性。修改CardSection的View部分：

import React from 'react';
import { View } from 'react-native';
const CardSection = (props) => {
  return (
    {/* 把内部样式和传入的样式放在数组里 */}
    <View style={[styles.containerStyle, props.style]}>
      {props.children}
    </View>
  );
};
const styles = {
  containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  }
};
export { CardSection };

方案2：使用ES6扩展运算符合并对象

这种方式更偏向纯JS对象合并，同样能实现覆盖效果：

import React from 'react';
import { View } from 'react-native';
const CardSection = (props) => {
  return (
    {/* 用扩展运算符合并两个样式对象 */}
    <View style={{ ...styles.containerStyle, ...props.style }}>
      {props.children}
    </View>
  );
};
const styles = {
  containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
    position: 'relative'
  }
};
export { CardSection };

使用示例 #

现在你就能像这样轻松覆盖单个或多个样式属性了：

<CardSection style={{ justifyContent: 'space-between', padding: 10 }}>
  {/* 这里放你的组件内容 */}
</CardSection>

可选优化（健壮性提升） #

如果担心父组件可能不传style属性（此时props.style为undefined），可以加个默认值避免潜在问题：

• 数组方式：[styles.containerStyle, props.style || {}]
• 扩展运算符方式：{ ...styles.containerStyle, ...(props.style || {}) }

这样就算没传style，组件也能正常渲染默认样式~

内容的提问来源于stack exchange，提问作者oisin097