Question

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

CSS

if (cache[f]) {
  return k(function(e, x) {
    return e ? cb(e) : k(x);
  });

Answer 1

在React中，使用对象指定样式，其中的键是样式名称的camelCase版本，而值是样式的值。如果该值不是显式的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 >

你很好走！！！希望这对您有帮助！

反应原生支持重复线性梯度吗？

2 个答案: