React Native：如何向基础组件添加任意的Props

在React Native开发中，通常会创建具有特定功能的基础组件，并进行重复使用。在这里，我们将介绍如何向现有的基础组件添加新的Props。

原始组件

首先，让我们看看起始组件。以下是一个Card组件的示例。

import React, { FC } from 'react';
import { View, ViewProps } from 'react-native';

type CardProps = ViewProps;

export const Card: FC<CardProps> = ({ children, ...rest }) => {
  return (
    <View {...rest}>
      {children}
    </View>
  );
};

此Card组件可以接收任何内容作为其子元素。

CardProps的类型是以ViewProps的形式定义的。ViewProps是React Native提供的类型，包含了View组件可接受的所有属性的类型定义。因此，这个Card组件也可以接受与View相同的属性。

新增Props

接下来，在这个Card组件中，我们添加一个新的属性onClose。这个属性是用来处理用户关闭动作触发的事件处理程序。

为了添加新的属性，首先需要定义新属性的类型。在这里，我们将onClose函数的类型定义为() => void。

然后，将这个新的属性添加到CardProps中。

interface CardProps extends ViewProps {
  onClose: () => void;
}

将其应用于组件。

最后，将新增的onClose属性应用于Card组件。

import React, { FC } from 'react';
import { View, ViewProps, TouchableOpacity } from 'react-native';
import { CloseIcon } from '../icons/CloseIcon';

interface CardProps extends ViewProps {
  onClose: () => void;
}

export const Card: FC<CardProps> = ({ onClose, children, ...rest }) => {
  return (
    <View {...rest}>
      <TouchableOpacity onPress={onClose}>
        <CloseIcon />
      </TouchableOpacity>
      {children}
    </View>
  );
};

新的onClose属性已添加到CardProps接口中，并添加到Card组件的参数中。这使得父组件可以将此函数作为属性传递，从而在用户点击CloseIcon时触发它。

我想要注意的是…rest这个写法。这是JavaScript中被称为”剩余参数（rest parameter）”的语法，可以将多个项目整合到一个数组中。在这种情况下，Card组件将接收到的所有属性都整理到rest对象中，并将其传递给View组件。换句话说，Card组件接收到的所有属性（除了onClose和children）将直接传递给View组件。

总结

在React Native中，创建通用组件，并在重新使用时通过添加新的属性来自定义组件是很常见的。本文详细解释了这种方法。此外，还解释了React Native的ViewProps和JavaScript的”剩余参数”。通过理解和利用这些概念，可以提高组件的可重用性和可读性。