React Native可复用组件开发：如何传递所有额外Props保持灵活性？

要让你的自定义组件能调用原生组件的所有Props，同时保留自身的基础样式和扩展性，核心思路是继承原生组件的类型定义，并传递剩余Props给原生组件，同时处理样式的合并。以下是具体实现方案：

1. 改造CustomText组件 #

针对你提供的CustomText，我们可以通过以下步骤优化：

步骤1：继承原生Text的Props类型 #

从react-native导入TextProps，让自定义组件的Props类型继承它，同时保留你的自定义属性（比如text，或者改用原生的children更符合习惯）。

步骤2：解构并传递剩余Props #

将自定义属性从Props中解构出来，把剩下的所有Props（比如原生的numberOfLines、selectable等）传递给内部的Text组件。

步骤3：合并基础样式与用户自定义样式 #

React Native支持用数组形式合并样式，用户传入的style会覆盖基础样式中相同的属性，保证扩展性。

改造后的代码：

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

// 继承原生TextProps，同时保留自定义的text属性（或改用children）
type CustomTextProps = TextProps & {
  text?: string; // 可选，也可以直接用children替代
};

const CustomText = ({ text, style, ...restProps }: CustomTextProps) => {
  const isDarkMode = useColorScheme() === 'dark';
  const baseStyle = { color: isDarkMode ? '#fff' : '#000' };

  return (
    <Text
      style={[baseStyle, style]} // 合并基础样式和用户传入的样式
      {...restProps} // 传递所有原生Props
    >
      {text ?? restProps.children} // 优先使用text，没有则用children
    </Text>
  );
};

export default CustomText;

使用示例：

// 调用原生Props，比如设置可选中、行数限制
<CustomText text="示例文本" selectable numberOfLines={2} style={{ fontSize: 16 }} />

2. 封装带secureTextEntry的自定义输入组件 #

对于你提到的输入组件，同样的逻辑，继承TextInputProps即可支持所有原生属性（包括secureTextEntry）：

import { TextInput, useColorScheme, TextInputProps } from 'react-native';
import React from 'react';

type CustomInputProps = TextInputProps;

const CustomInput = ({ style, ...restProps }: CustomInputProps) => {
  const isDarkMode = useColorScheme() === 'dark';
  const baseStyle = {
    borderColor: isDarkMode ? '#444' : '#ccc',
    borderWidth: 1,
    borderRadius: 4,
    color: isDarkMode ? '#fff' : '#000',
    padding: 10
  };

  return (
    <TextInput
      style={[baseStyle, style]}
      {...restProps} // 自动支持secureTextEntry等所有原生Props
    />
  );
};

export default CustomInput;

使用示例：

// 使用原生的secureTextEntry属性
<CustomInput placeholder="输入密码" secureTextEntry />

关键要点总结 #

• 类型继承：通过&运算符合并原生组件的Props类型，确保TypeScript能提供完整的属性提示。
• 剩余Props传递：用...restProps将未解构的所有属性传递给内部原生组件，无需手动列举每个原生属性。
• 样式合并：用数组形式合并基础样式和用户样式，用户样式优先级更高，满足定制需求。

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