与 Playstore aab 不同的独立 apk：LinearGradient 使用错误的颜色

Posted 2023-05-07

【中文标题】与 Playstore aab 不同的独立 apk：LinearGradient 使用错误的颜色

【英文标题】：Standalone apk different from Playstore aab: LinearGradient uses wrong colors

【发布时间】：2021-12-24 07:41:44

【问题描述】：

我有一个奇怪的错误。我正在为 android 开发一个带有 Expo 的 React Native 应用程序。在一个组件中，我使用LinearGradient (expo-linear-gradient)。在 Expo Go 和独立的 apk 中，一切看起来都很好。但是当我构建 aab (expo build:android -t app-bundle) 时，将其上传到 Playstore，然后从那里安装，线性渐变看起来不同。

我基本上是定义2个渐变，然后根据主题选择一个（浅色模式或深色模式）。我从useColorScheme 获得主题。

const LIGHT_TOP_GRAD = [
  "#ffffffFF", // rgba( 255, 255, 255, 1 )
  "#ffffffE6", // rgba( 255, 255, 255, 0.9 )
  "#ffffffB3", // rgba( 255, 255, 255, 0.7 )
  "#ffffff80", // rgba( 255, 255, 255, 0.5 )
];

const DARK_TOP_GRAD = [
  "#000000FF", // rgba( 0, 0, 0, 1 )
  "#000000E6", // rgba( 0, 0, 0, 0.9 )
  "#000000B3", // rgba( 0, 0, 0, 0.7 )
  "#00000080", // rgba( 0, 0, 0, 0.5 )
];

// in a component
const colorScheme = useColorScheme();
const darkMode = colorScheme !== "light";

// later in a render
        <LinearGradient
          colors=darkMode ? DARK_TOP_GRAD : LIGHT_TOP_GRAD
          style=[styles.pickerGradient,  height: gradHeight ]

在 Expo Go 和 apk 中：

color 和 backgroundColor 设置根据 useColorScheme 更改（好的） LinearGradient 颜色会根据 useColorScheme 变化（好的）

在aab中：

color 和 backgroundColor 设置根据 useColorScheme 更改（好的） LinearGradient 始终使用独立于 useColorScheme 的 LIGHT_BOT_GRAD (?!)

起初我以为这是我定义颜色的方式。所以我从rgba( 255, 255, 255, 0.5 ) 切换到#ffffff80（十六进制）。我还认为也许我看到的是默认渐变。但是如果我省略了颜色道具，我会得到错误。

我知道这个问题很模糊。 但是您知道这里可能存在什么问题吗？

有什么需要注意的吗？我是 React Native 和 Expo 的新手。

编辑：工厂

我现在已将渐变放入工厂。我担心也许有什么东西正在改变数组。

function getTopGrad(dark: boolean) 
  if (dark) 
    return [
      "#000000FF", // rgba( 0, 0, 0, 1 )
      "#000000E6", // rgba( 0, 0, 0, 0.9 )
      "#000000B3", // rgba( 0, 0, 0, 0.7 )
      "#00000080", // rgba( 0, 0, 0, 0.5 )
    ];
  
  return [
    "#ffffffFF", // rgba( 255, 255, 255, 1 )
    "#ffffffE6", // rgba( 255, 255, 255, 0.9 )
    "#ffffffB3", // rgba( 255, 255, 255, 0.7 )
    "#ffffff80", // rgba( 255, 255, 255, 0.5 )
  ];

无论如何，它没有帮助。就像只有白色支持 alpha。

编辑：无十六进制代码

我还尝试了以下版本，我只提供 2 种颜色。一个是白色或黑色，另一个是透明的。我希望我可以通过避免使用十六进制代码来解决这个问题。

function getTopGrad(dark: boolean) 
  return [dark ? "black" : "white", "transparent"];

无论如何它也不起作用。它总是显示白色渐变。

编辑：这是黑暗模式

我现在有点绝望了。我试图用我创建的 .pngs 来补充渐变。即使是在黑暗模式下，它们也会被转换为明亮的颜色。

黑色

变为

白色

白色

保持

白色

蓝色

变成

紫色

真正的

深灰色

变成真正的

浅灰色

似乎黑暗模式试图让一切都变得非常明亮。 这一切都只出现在aab中。

【参考方案1】：

我认为这通常与某些设备上的暗模式问题有关：

How to change MIUI force dark mode on expo? (SO) How to force APP in light mode (github) How can I force light mode on MIUI? (github)

在我绝望的情况下，我回到了一些极端的解决方案：我注意到样式 background-color 不受整个颜色转换黑框的影响。因此，我通过将具有部分透明背景颜色的多个 div 分层来创建渐变。这是组件：

function StepGradient(props: 
  height: number;
  layerCol: string;
  top: boolean;
): JSX.Element 
  const n = 20;
  const just = props.top ? "flex-start" : "flex-end";

  let div = <></>;
  for (let i = 1; i <= n; i++) 
    div = (
      <View
        style=[
          styles.gradient,
           justifyContent: just ,
           backgroundColor: props.layerCol ,
           height: (props.height * i) / n ,
        ]
      >
        div
      </View>
    );
  
  return div;


const styles = StyleSheet.create(
  gradientWrapper: 
    position: "absolute",
    width: "100%",
  ,
  gradient: 
    width: "100%",
  ,
);

然后我这样使用它：

      <View
        pointerEvents="none"
        style=[
          styles.gradientWrapper,
           height: 200 ,
        ]
      >
        <StepGradient
          height=200
          top=true
          layerCol=darkMode ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)"
        />
      </View>

这是我能够使它工作的唯一方法（经过 3 天的反复试验）。