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

Question

我有一个奇怪的错误。我正在为 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中。

Answer 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 天的反复试验）。