Reaction-Native-Style-Components：类型&#39；DefaultTheme&#39；上不存在属性。 [英] React-Native-Styled-Components: Property 'backgroundColor' does not exist on type 'DefaultTheme'

问题描述

我正在为我的应用程序使用REACTION-Native-TypeScrip。我的样式组件版本是 "styled-components": "^5.3.0"。我已经创建了定制ThemeProvider并包装到我的根应用程序。我不得不为我的应用程序切换黑色主题。我的ThemeProvider工作正常。我会做DarkTheme和LightTheme。但当我使用这个命令yarn tsc测试我的应用程序时。我收到打字错误：error TS2339: Property 'backgroundColor' does not exist on type 'DefaultTheme'.。在样式组件中，它是Create a declarations file，但它是针对版本： v4.1.4的。我正在使用&5.3.0&`。我真的不知道如何消除这个打字错误。

这是我的主题颜色及其类型

export interface Theme {
  backgroundColor: string;
  primary: string;
  text: string;
  error: string;
}

export const lightTheme: Theme = {
  backgroundColor: '#FFFFFF',
  primary: '#512DA8',
  text: '#121212',
  error: '#D32F2F',
};

export const darkTheme: Theme = {
  backgroundColor: '#121212',
  primary: '#B39DDB',
  text: '#FFFFFF',
  error: '#EF9A9A',
};

export type TTheme = typeof lightTheme;

这是我的主题提供商

import React, {useState, useEffect, useCallback, createContext} from 'react';
import {ThemeProvider as SCProvider} from 'styled-components/native';

import {lightTheme, darkTheme} from 'local/theme'; // I am imported the theme


interface ThemeContext {
  theme: string;
  toggleTheme: (value: string) => void;
}

interface ThemeProviderProps {
  children: JSX.Element;
}

export const ThemeContext = createContext<ThemeContext>({} as ThemeContext);

const ThemeProvider = ({children}: ThemeProviderProps) => {
  const [theme, setTheme] = useState('light');

  const toggleTheme = (value: string) => {
    if (value) {
      setTheme(value);

    }
  };

  const checkForLocalThemeSetting = useCallback(async () => {
    if (localTheme && localTheme !== theme) {
      setTheme(localTheme);
    }
  }, [theme]);

  useEffect(() => {
    checkForLocalThemeSetting();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <ThemeContext.Provider value={{theme, toggleTheme}}>
      <SCProvider theme={theme === 'dark' ? darkTheme : lightTheme}>
        {children}
      </SCProvider>
    </ThemeContext.Provider>
  );
};

export default ThemeProvider;

这是将我的主题提供程序转换到我的根项目

  <NavigationContainer>
      <StatusBar barStyle="dark-content" />
      <SafeAreaProvider>
        <LocalizationProvider>
          <ThemeProvider>
            <Tab.Navigator>
              <Tab.Screen name="Home" component={HomeScreen} />
              <Tab.Screen name="Settings" component={SettingsScreen} />
            </Tab.Navigator>
          </ThemeProvider>
        </LocalizationProvider>
      </SafeAreaProvider>
    </NavigationContainer>

在此组件中，我正在测试我的明暗

import React, {useContext} from 'react';
import {ScrollView, StyleSheet, Text, Switch} from 'react-native';

import styled from 'styled-components/native';

import {ThemeContext} from 'local/providers/ThemeProvider';


const Home = () => {

  const {theme, toggleTheme} = useContext(ThemeContext);


  return (
    <ScrollView>
      <Wrapper
        style={{}>
        <Text >Hello world</Text>
      </Wrapper>
      <Switch
        trackColor={{false: '#767577', true: '#81b0ff'}}
        thumbColor={theme === 'dark' ? '#f5dd4b' : '#f4f3f4'}
        ios_backgroundColor="#3e3e3e"
        onValueChange={i => {
          if (i) {
            toggleTheme('dark');
          } else {
            toggleTheme('light');
          }
        }}
        value={theme === 'dark'}
      />
    </ScrollView>
  );
};

const Wrapper = styled.View`
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: ${({theme}) => theme.backgroundColor}; // Typescript error: error TS2339: Property 'backgroundColor' does not exist on type 'DefaultTheme'.
`;


export default Home;

推荐答案

您需要创建声明文件以便按照文档中的方式初始化您的默认主题类型。现在您有一个类型interface Theme，但是样式组件不知道它。在这种情况下，必须在样式组件中声明类型。尝试将此代码段添加到主题颜色类型中。react.js example

import {DefaultTheme} from 'styled-components/native';

declare module "styled-components" {
  export interface Theme {
    backgroundColor: string;
    primary: string;
    text: string;
    error: string;
  }
}

export const lightTheme: DefaultTheme = {
  backgroundColor: "#FFFFFF",
  primary: "#512DA8",
  text: "#121212",
  error: "#D32F2F"
};

export const darkTheme: DefaultTheme = {
  backgroundColor: "#121212",
  primary: "#B39DDB",
  text: "#FFFFFF",
  error: "#EF9A9A"
};

这篇关于Reaction-Native-Style-Components：类型&#39；DefaultTheme&#39；上不存在属性。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！