如何使用 React Native 键入包含图标的按钮？答案

【问题标题】：How can type a button including an icon with React Native?如何使用 React Native 键入包含图标的按钮？
【发布时间】：2021-08-30 00:26:41
【问题描述】：

我正在尝试键入一个按钮组件，所有按钮组件都必须获得标题，但有些没有图标。这个图标来自 "@expo/vector-icons"。组件也显示图标怎么办？

点赞：<Button icon={<FontAwesome name="icon-name" size={24} colo="color"} title="Title here" />

我的实际代码：

type IButtonProps = TouchableOpacityProps & {
    title: string;
    icon?: any;
}

function Button({ title, icon }: IButtonProps) {
    return(
        <Container>
            <Text>
                {title}
            </Text>
        </Container>
    );
}

export default Button;

这是组件用于显示的时候

 <Button 
                    title="Login with Github" 
                    icon={`${
                        <FontAwesome name="github" size={24} color="#FFFFFF" />
                    }`} 
                />

【问题讨论】：

标签： reactjs typescript react-native

【解决方案1】：

在这种情况下，您可以使用 Touchable 组件：TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback、Pressable。

您可以创建自己的按钮组件：

const IconButton = ({ title, onPress, icon }) => (
  <TouchableOpacity style={styles.button} onPress={onPress}>
    <Text>{title}</Text>
    {icon}
  </TouchableOpacity>
);
...

并渲染它

<IconButton
  title={'Press me'}
  onPres={pressHandler}
  icon={<AntDesign name="caretright" size={24} color="black" />}
/>

【讨论】：