React-Native-Styled-Components：类型“DefaultTheme”上不存在属性“backgroundColor”

我正在为我的应用程序使用 react-native-Typescript。我的样式组件版本是 "styled-components": "^5.3.0". 我已经创建自定义ThemeProvider并包装到我的根应用程序。我为我的应用程序切换了深色主题。我的ThemeProvider工作正常。我可以制作DarkTheme和LightTheme。但是当我使用此命令测试我的应用程序 Typescript 时yarn tsc。我收到打字稿错误：error TS2339: Property 'backgroundColor' does not exist on type 'DefaultTheme'.。在 styled-components 中，它说Create a declarations file，但它用于 version: v4.1.4。我正在使用“^5.3.0”`。我真的不知道如何消除这个 Typescript 错误。

这是我的主题颜色和类型

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;