无法使用 styled-components 将样式应用于 React Native 中的自定义组件？

Posted 2023-02-22

【中文标题】无法使用 styled-components 将样式应用于 React Native 中的自定义组件？

【英文标题】：Can not apply styles to custom components in React Native using styled-components?

【发布时间】：2020-07-07 16:51:54

【问题描述】：

我在我的 React Native 应用程序中使用 styled-components 来设置它的样式。样式在其他组件上效果很好，但是当我尝试为自定义创建的组件设置样式时，没有应用任何样式。

在这种情况下，不应用填充。

这是我的代码示例之一：

import React,  Component  from "react";
import  View  from "react-native";
import styled from "styled-components/native";
import  BigTitle  from "./Titles";

class Home extends Component 
  render() 
    return (
      <View>
        <MainTitle title="Hello World!" />
      </View>
    );
  

export default Home;

const MainTitle = styled(BigTitle)`
  padding-top: 45px;
  padding-bottom: 10px;
`;

这是自定义创建的组件：

import React from "react";
import  Text  from "react-native";
import styled from "styled-components/native";

interface TitleProps 
  title: string;


export const BigTitle = (props: TitleProps) => 
  return <BigTitleText>props.title</BigTitleText>;
;

const BigTitleText = styled(Text)`
  text-align: left;
  font-size: 20px;
  letter-spacing: 1.8px;
  color: $props => props.theme.textColor;
  font-family: $props => props.theme.fontFamily;
  text-transform: uppercase;
  opacity: 1;
`;

【参考方案1】：

尝试在 BigTitle 组件中使用 style 属性：

export const BigTitle = (props: TitleProps) => 
  return <BigTitleText style=props.style>props.title</BigTitleText>;
;

【讨论】：

我也想出了这个主意，但行不通。

我在我的项目中使用样式化组件，我给你的解决方案对我有用。看看我在零食中创建的这个例子：snack.expo.io/@luaneduardo/styled-components-extend---example