React Native如何定义支持@expo/vector-icons图标的Button组件类型

你当前代码存在的问题 #

• 调用组件时给icon参数套了${}模板字符串，会将JSX元素转为字符串，无法正常渲染图标
• 组件内部没有做icon的条件渲染逻辑
• icon的类型定义用了any，类型校验不严谨

修正步骤 #

1. 优化类型定义 #

将icon的类型替换为ReactNode，匹配传入JSX元素的需求：

import type { TouchableOpacityProps } from 'react-native';
import type { ReactNode } from 'react';

type IButtonProps = TouchableOpacityProps & {
    title: string;
    // icon为可选参数，仅当需要图标时传入
    icon?: ReactNode;
}

2. 调整组件内部渲染逻辑 #

添加icon的条件渲染，同时透传所有TouchableOpacity原生属性：

function Button({ title, icon, ...restProps }: IButtonProps) {
    return(
        {/* 透传原生属性，如需调整图标和文字的排版，给Container添加flexDirection: row、alignItems: center样式即可 */}
        <Container {...restProps}>
            {/* 仅当传入icon时才渲染图标 */}
            {icon && icon}
            <Text>
                {title}
            </Text>
        </Container>
    );
}

export default Button;

3. 修正组件调用方式 #

去掉icon参数外层的模板字符串，直接传入图标组件：

// 带图标的调用方式
<Button 
    title="Login with Github" 
    icon={<FontAwesome name="github" size={24} color="#FFFFFF" />} 
/>

// 不需要图标的调用方式，直接不传icon参数即可
<Button 
    title="普通按钮" 
/>

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