在 React Native 中创建可通过 props 覆盖默认样式的自定义按钮

React Native 的 style 属性支持接收样式数组，数组中后置样式的优先级更高：同名属性会覆盖前置规则，非冲突属性会合并保留。基于这个特性即可实现默认样式保留、外部样式自定义覆盖的需求。

修改后的组件代码 #

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

// 新增 containerStyle、textStyle 两个可选样式入参
export default function CustomButton({ txt, onPress, containerStyle, textStyle }) {
  return (
    <TouchableOpacity
      style={[styles.container, containerStyle]}
      onPress={onPress}
    >
      <Text style={[styles.text, textStyle]}>{txt}</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#3F51B5',
    padding: 10,
    margin: 20,
    width: '80%',
    borderRadius: 15,
    alignItems: 'center'
  },
  text: {
    fontWeight: 'bold',
    color: 'white',
    fontSize: 16
  }
});

注意：React 自定义组件强制要求大驼峰命名，原代码中的 custom_button 会被识别为内置原生标签引发报错，建议改为 CustomButton，文件名同步命名为 CustomButton.jsx。

使用示例 #

父组件调用时按需传入样式即可，不传样式props时完全沿用默认规则：

import CustomButton from './CustomButton';

export default function DemoPage() {
  return (
    <CustomButton
      txt="提交"
      onPress={() => console.log('按钮点击')}
      // 仅覆盖背景色、圆角，其余容器默认样式保留
      containerStyle={{ backgroundColor: '#FF5722', borderRadius: 8 }}
      // 仅覆盖字号、文字颜色，加粗默认样式保留
      textStyle={{ fontSize: 20, color: '#000' }}
    />
  );
}

扩展：支持完全替换默认样式 #

上述逻辑为合并覆盖模式，也是绝大多数业务场景的通用方案。如果需要彻底清空默认样式、完全使用外部传入的规则，可以新增开关prop控制：

export default function CustomButton({ 
  txt, 
  onPress, 
  containerStyle, 
  textStyle,
  replaceDefault = false 
}) {
  return (
    <TouchableOpacity
      style={replaceDefault ? containerStyle : [styles.container, containerStyle]}
      onPress={onPress}
    >
      <Text style={replaceDefault ? textStyle : [styles.text, textStyle]}>
        {txt}
      </Text>
    </TouchableOpacity>
  );
}

• 外部样式既支持内联对象，也支持 StyleSheet.create 生成的样式对象，用法无区别
• 样式props为可选参数，不传时值为 undefined，React Native 会自动过滤数组中的假值，不会抛出异常

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