0

我使用图书馆反应原生甲板刷卡能够刷卡。我希望我的屏幕具有线性渐变背景颜色，但问题是如果设置了背景颜色，它似乎不会继承线性渐变颜色。swiper 库有一个 backgroundColor 属性，但默认为蓝色，因此不渲染线性渐变。所以我的问题是，这可以被覆盖/线性渐变可以变成背景颜色吗？我下面的代码供参考

 <View style={styles.Scontainer}>
      <LinearGradient
        colors={[
          "#F7BBB2",
          "#FFC9B5",
          "#FFDDC7",
          "#FFF6D4",
          "#FFFDF2",
        ]}
        style={styles.background}
        //  Linear Gradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      >

        <Swiper
          cards={data}
          renderCard={(card) => {
            return (
              <View style={styles.card}>
                <Text style={styles.text}>Hello world</Text>
              </View>
            );
          }}
          cardIndex={0}
          infinite={true}
          horizontalSwipe={false}
          goBackToPreviousCardOnSwipeBottom={true}
          showSecondCard={true}
          disableBottomSwipe={true}
          // backgroundColor= "linearGradient? -> style prop
        ></Swiper>
      </LinearGradient>
    </View>
4

1 回答 1

0

我所做的和已经工作的（至少在我的情况下）是为带有 id 的线性渐变添加 Def 并将该渐变指定为背景颜色，如下所示：

import { Defs, LinearGradient } from 'react-native-svg';

...

return (
  <>
    <Defs>
      <LinearGradient
        id="myGradient" // important to set an id!
        colors={[
          "#F7BBB2",
          "#FFC9B5",
          "#FFDDC7",
          "#FFF6D4",
          "#FFFDF2",
        ]}
        style={styles.background}
        //  Linear Gradient
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
      />
    </Defs>
    <Swiper
          cards={data}
          renderCard={(card) => {
            return (
              <View style={styles.card}>
                <Text style={styles.text}>Hello world</Text>
              </View>
            );
          }}
          cardIndex={0}
          infinite={true}
          horizontalSwipe={false}
          goBackToPreviousCardOnSwipeBottom={true}
          showSecondCard={true}
          disableBottomSwipe={true}
          backgroundColor="url(#myGradient)" // we use the id here
        />
  </>
)
于 2022-02-02T16:27:55.133 回答