在 React Native 中同时使用样式组件 ThemeProvider 和 React-Navigation

Question

我正在尝试使用样式组件为我的 React Native 应用程序创建主题。但是，当我尝试从样式化组件中的主题访问值时，我收到一条错误消息

“'DefaultTheme' 类型不存在属性'primary'。”

这是我的样式组件的示例：

const StyledText = styled.Text`
  font-size: 50px;
  color: ${(props) => props.theme.primary};
  font-weight: 500;
  text-align: center;
`;

颜色在我的应用程序中设置正确，但 VS Code 在那里抛出错误。 我在我的应用程序中使用 React Navigation 进行路由，因为它提供了自己的主题系统，所以我的 VS 代码有问题。

以下是我设置应用程序的方式：

function App() {
  const currentTheme: ITheme = lightTheme;

  return (
    <ThemeProvider theme={currentTheme}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name='Home' component={HomeScreen} options={{headerShown: false}} />
          <Stack.Screen name='CreateRoute' component={CreateRouteScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </ThemeProvider>
  );
}

这就是我保持主题的方式：

export enum Themes {
  light,
  dark
}

export interface ITheme {
    primary: string,
    primary_dark: string,
    background: string,
    text: string,
    text_accent: string,
    input: string
}

export const lightTheme : ITheme = {
    primary: '#079A4B',
    primary_dark: '#115B33',
    background: '#FFFFFF',
    text: '#1E1E1E',
    text_accent: '#747683',
    input: '#F4F4F4'
};