我的React Native应用程序在光模式下落后，但在黑暗中超快

Question

我正在创建一个带有浅色模式的React Native应用程序。应用程序中所有组件的颜色均由我的自定义挂钩控制：

export const useColors = (): UseColorsResult => {
  const theme = useColorScheme();
  const isDarkTheme = theme === 'dark';

  const colors = useCallback(
    (entity: ColorTypes) => {
      const entityColors = entityToColorsMapper[entity];
      const colorKey = entityColors[isDarkTheme ? 1 : 0] || entityColors[0];

      return colorsObject[colorKey];
    },
    [isDarkTheme],
  );

  return { colors, isDarkTheme };
};

EntityTocolorSmapper对象值看起来像

{
  text: ['black', 'white'],
  subtext: ['codGray', 'concrete'],
}

，ColorsObject看起来像是

{
  white: '#FFFFFF',
  black: '#000000',
  concrete: '#F2F2F2',
  codGray: '#252525',
}

在组件中我通常会执行这样的操作：

const AutoColoredText: FC<TextProps> = (props) => {
  const { colors } = useColors();
  const textStyle = {color: colors('text')}

  return <Text style={textStyle} {...props}></Text>
}

事实是，当我启动应用程序时（带有所有优化版本版本， ）在我的三星Galaxy S10（Android 12）手机上，在系统灯模式下，它非常矮小且FPS（滚动，屏幕更改等），

最主要的是，在黑暗模式下启动时，没有任何类似的事情发生呢

更有趣的一件事是：

• 如果我以 dark模式启动该应用，然后在使用该应用程序时将其更改为 light ，
• 如果我在光模式，然后将其更改为 dark 在使用该应用程序时，它仍然很懒惰，

我完全不了解，甚至无法猜测发生了什么以及为什么。

ps 在另一台没有12个Android的手机上一切正常。

upd：我已经设置isdarktheme = true作为常量值，然后在系统灯模式下启动了该应用程序，它很laggy！在系统的黑暗模式下，它很快，所以问题绝对不在我的渲染中或其他任何与反应有关的员工

Answer 1

一切都比看起来要容易得多：我的光线模式的飞溅屏幕图像以某种方式具有很高的分辨率（接近7000 x 3000像素），而每一侧的黑暗模式都低两次（3500 x 1500）。

Splash屏幕映像还设置为Android主题中的应用背景（用于Splash和App之间的平稳过渡）。

当我注意到它并将光模式的飞溅屏幕图像分辨率更改为与夜间模式相同时，应用程序变得迅速。这就是

我要以一种方式来帮助可能与我相同问题的人们发布此答案:(

Answer 2

因此，您很幸运地找到了答案！将来可能会有所帮助的是React Dev工具扩展中的火焰图！您可以为多个支持的浏览器下载它，并在F12菜单中访问FlameGraph！它显示了哪个元素需要在页面上渲染多长时间，包括其子元素的加载时间:)