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

Question

我有一个奇怪的错误。我正在使用 Expo for Android. In one component I am using LinearGradient (expo-linear-gradient) 开发一个 React Native 应用程序。在 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 总是使用 LIGHT_BOT_GRAD 独立于 useColorScheme (?!)

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

我知道这个问题很含糊。但是你知道这里可能有什么问题吗？

有什么需要注意的地方吗？我是 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只支持白色。

编辑：无十六进制代码

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

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

反正也没用。它总是显示白色渐变。

编辑：是深色模式

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

黑色变为白色
白色保持白色
蓝色变成紫色
真深灰变成真浅灰

似乎黑暗模式试图让一切都变得非常明亮。这一切只出现在 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 天的反复试验）。

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

Standalone apk different from Playstore aab: LinearGradient uses wrong colors

android

apk

react-native

expo

android-app-bundle

编辑：工厂

编辑：无十六进制代码