React Native自定义TextInput组件如何实现样式部分覆盖？

要实现保留默认样式同时支持外部样式扩展，你需要修改组件内部的样式合并逻辑，具体做法如下：

方法：解构props并合并样式 #

把组件内部的默认样式和外部传入的style合并成数组，React Native会自动处理样式的覆盖与合并——数组中后面的样式会覆盖前面的同名属性，不同属性则会叠加生效。

修改后的组件代码：

import { FunctionComponent, TextInput, TextInputProps, useTheme } from 'react-native';

const RegularTextInput: FunctionComponent<TextInputProps> = ({ style, ...restProps }) => {
    const { colors } = useTheme();

    // 提取默认样式到单独变量，更清晰
    const defaultStyle = {
        fontFamily: 'Poppins-Light',
        backgroundColor: colors.textFieldBackground,
        height: 40,
        padding: 5,
        borderRadius: 10,
        overflow: 'hidden',
        lineHeight: 21,
        fontSize: 14,
        borderColor: colors.primary,
        borderWidth: 1,
        width: 180,
    };

    return (
        <TextInput
            style={[defaultStyle, style]} // 合并默认样式与外部传入的style
            {...restProps} // 传递除style外的其他props
        />
    );
};

export default RegularTextInput;

效果说明 #

现在你再像之前那样使用组件：

<RegularTextInput
    style={{
      marginRight: 10,
      marginLeft: 10,
    }}
/>

• 组件会保留所有默认样式（比如backgroundColor、borderRadius等）
• 外部传入的marginRight和marginLeft会被添加生效
• 如果外部传入的样式和默认样式有同名属性（比如你传入width: 200），则外部样式会覆盖默认值

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