React Native复合组件类型定义：如何获取Text与TextInput类型

核心实现思路 #

根本不需要手动枚举Text、TextInput的所有参数类型，React Native 从0.63版本开始就为全部内置组件内置了完整的TypeScript类型定义，直接拿官方导出的Props类型复用就行。

• Text组件对应的全量参数类型为 TextProps
• TextInput组件对应的全量参数类型为 TextInputProps

两个类型都可以直接从react-native包导入，完全不需要自己手写类型定义。

完整类型定义示例 #

改造原有JS组件为带完整类型约束的TSX组件，代码如下：

import React from 'react';
import { 
  View, 
  Text, 
  TextInput,
  // 直接导入内置组件的Props类型
  type TextProps,
  type TextInputProps
} from 'react-native';

// 定义自定义复合组件的Props类型
type CompositeComponentProps = {
  // text字段直接复用Text组件的全部参数类型
  text: TextProps;
  // input字段直接复用TextInput组件的全部参数类型
  input: TextInputProps;
}

const CompositeComponent = ({ text, input }: CompositeComponentProps) => {
  return (
    <View>
      <Text {...text}></Text>
      <TextInput {...input} />
    </View>
  )
}

这种复用方式的类型约束和你直接使用原生Text、TextInput组件时完全一致，不会出现类型和实际行为不匹配的问题。

实用配置技巧 #

• 如果使用的是0.63以下的低版本RN，没有内置类型导出，可以安装@types/react-native类型包，导入路径和用法和官方内置类型完全一致
• 要是不想让外部传入的参数覆盖组件内部写死的默认配置，可以搭配TS内置工具类型裁剪可选参数，比如用Omit<TextProps, 'style'>就可以排除style字段，禁止外部传入样式覆盖组件内部默认样式
• 直接复用官方组件类型的好处是，RN版本升级调整内置组件参数时，自定义组件会自动同步最新的类型约束，不需要手动挨个修改类型定义

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