порядок оценки вопроса реагировать нативный против браузера - PullRequest
Новая
       23

порядок оценки вопроса реагировать нативный против браузера

0 голосов
/ 09 октября 2019

У меня есть проблема с, как мне кажется, проблемой порядка оценки, но я не могу ее точно выяснить. Код работает в среде с естественной реакцией, но эта функция является чисто JS, поэтому ее можно запускать и в браузерах.

Итак, я сделал небольшую функцию, которая создает представление цвета в hsla ()формат. Он не возвращает строковое значение напрямую, вместо этого он возвращает функцию, которая использует начальные значения h, s, l, a, и принимает дополнительные переопределения для l и a, поэтому я могу настроить их на месте. Ниже приведена функция: 

function Color(h, s, l, a) {
    return (L, A) => {
        let LL = (l || 0) + (L || 0);
        if (LL < 0) { LL = 0; }
        if (LL > 100) { LL = 100 }

        return `hsla(${h || 0},${s || 0}%,${LL}%,${A || a || 1.0})`;
    }
};

Проблема в том, что она ведет себя по-разному по отношению к альфа-значению между средой браузера и средой реагирования. В частности, когда я пытаюсь сделать это: 

var blue=Color(240,100,50);
var semiTransparentBlue = blue(0, 0.5); // 0 lightness adjustment, 0.5 alpha opacity
console.log("The hsla representation of the color is:",semiTransparentBlue);

в среде браузера, он корректно возвращает строку "hsla(240,100%,50%,0.5)".

В реагирующем, однако: 

import React from "react";
import { View, Text } from "react-native";
import Color from "../libs/Color.js"; // the Color function is exported as-is in this file

export default class coloredComponent extends React.Component{
  render = ()=>{
    var blue=Color(240,100,50);
    var semiTransparentBlue = blue(0, 0.5); // 0 lightness adjustment, 0.5 alpha opacity
    // the above color function returns `"hsla(240,100%,50%,1)"`
    // instead of `"hsla(240,100%,50%,0.5)"`, wrong alpha value
    console.log("The hsla representation of the color is:",semiTransparentBlue);

    return <View style={{ flex: 1, backgroundColor: semiTransparentBlue }} />
}

возвращает "hsla(240,100%,50%,1)". Добавление console.log () в возвращаемую функцию показывает, что я не получаю неопределенных значений ни для параметров L, ни для A (в возвращенной функции цвета). На самом деле, он не возвращает вообще никакого альфа-значения, отличного от 1, я пробовал с 0,0, 0,1 и другими, он всегда возвращает 1 для альфы.

Может кто-нибудь помочь мне выяснить, в чем дело?

...