反应原生线性渐变:颜色淡出

时间:2019-10-04 08:33:26

标签: react-native color-space

我正在使用react-native-linear-gradient包来形成线性渐变。我在XD设计中使用拾色器选择了完全相同的颜色,以在我的应用程序中形成相同的渐变。这是我的代码:

<LinearGradient start={{x:0,y:0}} end={{x:1,y:1}} style={StyleSheet.absoluteFill} colors={['#D300B5', '#FF5400']} >...

这些十六进制值与设计相同,但这是与设计相比的结果:

enter image description here

颜色被明显洗掉。我检查了不透明性,以确保所有内容均为100%,没有任何超出渐变的地方,渐变视图没有扩展到屏幕之外,XD,我的Mac和iPhone X均使用Display P3颜色空间。

为什么颜色会被洗掉?

1 个答案:

答案 0 :(得分:1)

注意:此解决方案仅适用于 iOS,适用于应用中使用的所有颜色。

在很长一段时间找不到任何东西之后,我创建了一个 React Native 本身的补丁,因为问题源于 React Native 如何在 RCTConvert.m 中的本机代码中创建颜色:

>

return [UIColor colorWithRed:... green:... blue:...]

colorWithRed 的两次出现(在撰写时有两次)切换到 colorWithDisplayP3Red 并重建(不要忘记,因为我们正在更改本机代码,热重载不起作用)应用程序工作:颜色现在在 P3 颜色空间中呈现。请注意,这种方法会更改您在应用中创建/使用的所有颜色,因此基本上每种颜色都会看起来更清晰。