反应原生是否支持重复线性渐变？

Question

我正在尝试为我在 React Native 中的视图设置一个重复线性渐变。但是我找不到任何可以帮助我使用它的信息或库。 我找到了一个名为 react-native-linear-gradient 的库，但似乎只有简单的线性渐变很有帮助。 提前感谢您的帮助

CSS

background: repeating-linear-gradient(
  -55deg,
  #222,
  #222 10px,
  #333 10px,
  #333 20px
);

Answer 1

在 React 中，样式是用一个对象指定的，其中键是样式名称的驼峰式版本，值是样式的值。如果该值不是明确的 typeof 'number'，则整个值必须是单个字符串。在该字符串中，可以使用普通的 css 样式名称。

这是一个例子：

<ExampleComponent
  style={{
    background: 'repeating-linear-gradient(-55deg, #222, #222 10px,#333 10px, #333 20px)',
    backgroundSize: 'cover',
  }}
/> 

Answer 2

我在启动画面中使用了 react-native-linear-gradient

我已经设置了 4 种不同的颜色，并使其成为白色渐变。

const gradient1 = [Colors.secondary1Color, Colors.white];
const gradient2 = [Colors.primary1Color, Colors.white];
const gradient3 = [Colors.secondaryColor, Colors.white];
const gradient4 = [Colors.primaryColor, Colors.white];

我先设置this.state = {changeGradient: true}

然后我有这个 changeGradient 函数，它可以改变 const 渐变颜色曾经有过第二次

changeGradient = async () => {
        console.log("changeGradient", await this.state.gradient);
        if (this.state.changeGradient) {
            setTimeout(async () => {
                await this.setState(({ gradient }) => ({ gradient: gradient === gradient1 ? gradient2 : gradient === gradient2 ? gradient3 : gradient === gradient3 ? gradient4 : gradient1 }));
                this.changeGradient();
            }, 500);
        }
    };

然后，我在Lineargradient 组件中进行渲染

<LinearGradient colors={this.state.gradient} style={styles.container}>
</LinearGradient >

你可以走了！！！ 希望对您有所帮助！