React Native中使用Styled Components实现文本式按钮的问题

问题描述 #

尝试在React Native中使用Styled Components将文本实现为按钮，编写的样式组件代码如下：

import { Button } from "react-native";
import styled from "styled-components/native";

export const ButtonCol = styled(Button)`
    backgroundcolor: red;
    color: white;
    border: 0;  
`;

组件使用代码：

export const CategoryInfoCard = ({ category = {} }) => {
    const {
        name = "Zoogdieren",
        images = "https://cdn.pixabay.com/photo/2017/02/20/18/03/cat-2083492_960_720.jpg",
        icon = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSE3_hmm2zWrH4ZLUoqEr4FUb5f-BIn9_c5Qg&usqp=CAU",
        detail = "Detail",
    } = category;

    return (
        <CategoryCard
            elevation={5}
            style={{
                borderTopLeftRadius: 0,
                borderTopRightRadius: 0,
                borderBottomLeftRadius: 0,
                borderBottomRightRadius: 0,
            }}>
            <Text variant="caption" style={{ left: 100 }}>
                {name}
            </Text>
            <CategoryGroupCardCover source={{ uri: images }} />
            <Card.Actions>
                <ButtonCol title="ok" variant="text" />
            </Card.Actions>

        </CategoryCard>
    );
};

但自定义样式未生效，仍显示默认蓝色矩形按钮，需实现文本式按钮。

解决方案 #

React Native原生Button组件的样式由系统底层控制，Styled Components无法直接覆盖其内置样式，这是样式失效的核心原因。推荐两种可行方案：

方案一：用TouchableOpacity包裹Text自定义 #

完全自主控制样式，灵活性最高：

import { TouchableOpacity, Text } from "react-native";
import styled from "styled-components/native";

// 定义按钮容器样式
export const TextButton = styled.TouchableOpacity`
    padding: 8px 16px;
`;

// 定义按钮文本样式
export const ButtonText = styled.Text`
    color: red;
    font-size: 16px;
    /* 可添加下划线、字体粗细等样式 */
`;

组件内使用：

<Card.Actions>
    <TextButton onPress={() => {/* 点击逻辑 */}}>
        <ButtonText>ok</ButtonText>
    </TextButton>
</Card.Actions>

方案二：使用Pressable组件（React Native 0.63+） #

官方推荐的交互组件，支持更多状态样式（如按下效果）：

import { Pressable, Text } from "react-native";
import styled from "styled-components/native";

export const TextButton = styled.Pressable`
    padding: 8px 16px;
`;

export const ButtonText = styled.Text`
    color: red;
    font-size: 16px;
`;

组件内使用（支持按下状态变化）：

<Card.Actions>
    <TextButton onPress={() => {/* 点击逻辑 */}}>
        {({ pressed }) => (
            <ButtonText style={{ opacity: pressed ? 0.7 : 1 }}>ok</ButtonText>
        )}
    </TextButton>
</Card.Actions>

额外提示 #

若代码中使用的是第三方UI库（如Material UI）的Button组件（从variant="text"推测），需针对该库的组件进行Styled Components封装，而非原生Button。例如针对@react-native-material/core的Button：

import { Button } from '@react-native-material/core';
import styled from 'styled-components/native';

export const TextButton = styled(Button)`
    /* 此处可定制该组件支持的样式 */
`;

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