React Native styled组件如何通过样式传递props？主题配置背景图报错

• attrs方法用法错误
  原代码中将动态取主题值的函数直接作为参数传入require执行：attrs(require(props => props.theme.backgroundImage))，组件定义阶段就会执行这行逻辑，此时require拿到的根本不是图片路径，是未执行的函数本身，直接触发找不到对应模块的报错。
• RN资源加载机制不匹配
  原主题配置中直接存储字符串格式的图片路径"../../../assets/background.png"，但React Native的打包器只识别静态调用require()引入的资源，纯字符串路径无法在打包阶段被扫描到，哪怕路径正确也无法加载。
• props透传逻辑冲突
  原index.js中手动传入source={props.backgroundImage}，和在attrs里定义的主题取值逻辑重复，手动传入的props会覆盖attrs注入的属性，直接导致主题动态切换失效。

1. 调整主题配置文件，替换字符串路径为静态require引入的资源

   // themes/light.js
   export default {
     backgroundImage: require("../../../assets/background.png")
   }
   
   // themes/dark.js（暗黑主题配置同理）
   export default {
     backgroundImage: require("../../../assets/background-dark.png")
   }
   

2. 修正styled组件的attrs写法，正确注入主题值

   // styles.js
   import styled from "styled-components/native";
   
   export const Background = styled.ImageBackground.attrs((props) => ({
     source: props.theme.backgroundImage
   }))`
     /* 保留原有组件样式即可 */
     flex: 1;
   `;
   

3. 简化组件调用，移除冗余的props透传
   因为主题值已经通过ThemeProvider全局注入，attrs逻辑会自动读取对应主题的背景图设置，不需要手动传source属性：

   // index.js
   import { Background } from "./styles";
   
   <Background>
     {/* 子组件内容 */}
   </Background>
   

app.js中的ThemeProvider嵌套结构本身不存在问题，只需要在业务逻辑中切换传入的theme对象（比如从themes.light切到themes.dark），Background组件就会自动读取对应主题的背景图配置，完成暗黑模式的背景切换。

若存在局部自定义覆盖默认主题背景的需求，可在attrs逻辑中增加优先级判断：source: props.customBackground ?? props.theme.backgroundImage，传入customBackground时优先使用自定义值，未传入则默认使用主题配置值。

内容的提问来源于stack exchange，提问作者Wellington A. Moreira