React Native特定组件样式Props传递问题：自定义按钮样式未生效求助

嘿，我一眼就看到问题所在啦——你写的样式合并方式不对，导致buttonStyle的样式没被正确应用，只有backgroundColor生效了。咱们来一步步修正：

问题根源 #

在React Native中，要合并多个样式对象，必须使用数组，而不是嵌套对象。你之前写的{{ buttonStyle, backgroundColor: [csCode] }}犯了两个小错误：

1. 用嵌套对象的方式，相当于把buttonStyle当成了一个属性值，而不是合并它的样式规则；
2. backgroundColor的值不需要用数组包裹，数组是用来合并多个样式对象的，单个属性值直接传变量就行。

修正后的完整代码 #

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ buttonName, csCode }) => {
  const { buttonStyle, textStyle } = styles;
  return (
    // 用数组合并预定义样式和自定义背景色
    <TouchableOpacity style={[buttonStyle, { backgroundColor: csCode }]}>
      <Text style={textStyle}>
        {buttonName}
      </Text>
    </TouchableOpacity>
  );
};

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#ffffff',
    fontSize: 35,
    fontWeight: '600',
  },
  buttonStyle: {
    justifyContent: 'center',
    alignSelf: 'stretch',
    height: '20%',
    // 可以加个默认背景色，防止csCode未传递时按钮无背景
    backgroundColor: '#007AFF'
  }
};

export { Button };

额外说明 #

• 样式数组的优先级：后面的样式对象会覆盖前面的。比如如果buttonStyle里定义了backgroundColor，传入的csCode会替换掉它，正好符合你“从外部传递样式改变背景色”的需求；
• 建议给buttonStyle加个默认背景色，这样就算父组件没传csCode，按钮也不会显示异常。

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