React Native JS转TS后styled-components主题类型错误求助

一、修复主题类型错误 #

报错原因是styled-components默认的DefaultTheme类型不包含你自定义的spacing和color属性，需要扩展该类型并同步上下文的类型定义。

1. 定义自定义主题类型 #

在themes文件夹下新建types.ts，明确主题的结构：

export type ThemeColor = {
  background: string;
  black: string;
  white: string;
};

export type ThemeSpacing = {
  xs: string;
  sm: string;
};

export type Theme = {
  color: ThemeColor;
  spacing: ThemeSpacing;
};

2. 扩展styled-components的DefaultTheme #

在项目根目录（或src目录下）新建styled.d.ts文件，让默认的DefaultTheme继承自定义主题类型：

import 'styled-components/native';
import { Theme } from './src/themes/types';

declare module 'styled-components/native' {
  export interface DefaultTheme extends Theme {}
}

3. 修正ThemeContext的类型定义 #

修改theme.tsx中的类型错误，确保上下文的theme类型匹配自定义主题：

import React, { createContext, useContext, useState } from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import themes from "../themes/";
import { Theme } from "../themes/types";

type ThemeContextType = {
  theme: Theme;
  themeKey: string;
  setThemeKey: (value: string) => void;
};

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const ThemeProvider = ({ children }) => {
  const [themeKey, setThemeKey] = useState("dark");
  const theme = themes[themeKey as keyof typeof themes];

  return (
    <ThemeContext.Provider value={{ theme, themeKey, setThemeKey }}>
      <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>
    </ThemeContext.Provider>
  );
};

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

4. 同步主题文件的类型（可选） #

给light.tsx和dark.tsx加上类型注解，避免后续修改出错：

import { Theme } from './types';

const light: Theme = {
  color: {
    background: "#ffffff",
    black: "#ffffff",
    white: "#000000",
  },
  spacing: {
    xs: "6px",
    sm: "8px",
  },
};

export default light;

完成以上步骤后，组件中使用props.theme.spacing和props.theme.color就不会再出现类型错误。

二、跨文件夹传递Props的方案 #

跨文件夹传递Props本质是类型和数据的共享，常用以下三种方式：

1. 统一管理类型定义 #

在项目中创建专门的types文件夹，存放所有组件的Props类型，其他文件夹的组件直接引用这些类型：

• 示例：在src/types/components.ts中定义Input组件的Props：

import { TextInputProps } from 'react-native';

export type InputProps = TextInputProps & {
  customProp?: string;
};

• 在其他文件夹的组件中引用：

import { InputProps } from '../../types/components';

const Input = styled.TextInput<InputProps>`
  // 样式代码
`;

2. Props Drilling（逐层传递） #

如果是局部组件层级的Props传递，直接通过父组件接收后，逐层传给子组件：

// src/screens/ParentScreen.tsx
import ChildComponent from '../../components/ChildComponent';

const ParentScreen = () => {
  const userInfo = { name: 'test', age: 20 };
  return <ChildComponent userInfo={userInfo} />;
};

// src/components/ChildComponent.tsx
import GrandChild from '../components/GrandChild';

type ChildProps = {
  userInfo: { name: string; age: number };
};

const ChildComponent = ({ userInfo }: ChildProps) => {
  return <GrandChild user={userInfo} />;
};

3. 使用Context传递全局Props #

对于全局共享的数据（比如主题、用户状态），用React Context统一管理，避免多层传递：

• 参考前面的ThemeProvider实现，创建全局Context，在根组件包裹后，任何子组件都可以通过useContext或自定义Hook获取数据：

// src/contexts/UserContext.tsx
import { createContext, useContext, useState } from 'react';

type UserContextType = {
  user: { name: string } | null;
  setUser: (user: { name: string } | null) => void;
};

const UserContext = createContext<UserContextType | undefined>(undefined);

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState<{ name: string } | null>(null);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
};

export const useUser = () => {
  const context = useContext(UserContext);
  if (!context) throw new Error('useUser must be used within UserProvider');
  return context;
};

• 在任意文件夹的组件中使用：

import { useUser } from '../../contexts/UserContext';

const Profile = () => {
  const { user } = useUser();
  return <Text>{user?.name}</Text>;
};

内容的提问来源于stack exchange，提问作者azim spaculus