1

我可以通过 html、css、jquery 来实现

这是我的html代码:

  ` var total_time_in_sec = 10
    var also_have_in_sec = 9;
    setInterval(() => {
        if (also_have_in_sec > 1) {
            var green_percent = Math.round(also_have_in_sec / total_time_in_sec * 100);

            if ((100 - green_percent) <= 50) {
                var color1 = "green " + green_percent + "%";
                var color2 = "red " + (100 - green_percent) + "%";
                var str = "linear-gradient(to left," + color1 + "," + color2 + ")";
            } else {
                var color1 = "red " + (100 - green_percent) + "%";
                var color2 = "green " + green_percent + "%";
                var str = "linear-gradient(to right," + color1 + "," + color2 + ")";
            }
            $("img").css("background", str);
            also_have_in_sec = also_have_in_sec - 1;
        } else {
            clearInterval();
            $("img").css("background", "red");
        }
        console.log(green_percent);
    }, 1000);`

输出如下: 在此处输入图像描述

现在我想在后端可用的 react-native app.percentage 中使用具有这种背景的图像。setTimeout 和 clearInterval 不是强制性的。

4

1 回答 1

2

您不能将您描述的线性渐变样式应用于反应本机应用程序。

但是,为了在 react native 应用程序中显示线性渐变,这个库可能很有用。

于 2022-02-02T12:57:16.237 回答