React Native：径向渐变背景

Question

是否有一个包或另一种方法可以为其中一个视图提供简单的（比如说从蓝色到蓝色的径向渐变背景）？

我尝试过react-native-radial-gradient，但它似乎已经过时了。

Answer 1

也许你可以使用我的 react-native-image-filter-kit 包中的 RadialGradient 。请注意，react-native-image-filter-kit 中的渐变最初被设计为与其他图像混合的基元，并且您的情况并不是首先考虑的。

import { Image } from 'react-native'
import {
  RadialGradient,
  ImageBackgroundPlaceholder
} from 'react-native-image-filter-kit'

const imageStyle = { width: 320, height: 320 }

const gradient = (
  <RadialGradient
    colors={['red', '#00ff00', 'blue']}
    stops={[0, 0.5, 1]}
    image={
      <ImageBackgroundPlaceholder style={imageStyle}>
        /* your content here */
      </ImageBackgroundPlaceholder>
    }
  />
)

Answer 2

您还可以从

react-native-svg

包创建自己的径向渐变

import { Defs, Stop, Svg, RadialGradient as SVGRadialGradient, Path } from 'react-native-svg'

export function RadialGradient() {
  return (
    <Svg
      height="100%"
      width="100%"
      style={{
        position: 'absolute',
      }}
    >
      <Path
        d="M0 0H375V279C375 283.418 371.418 287 367 287H8C3.58172 287 0 283.418 0 279V0Z"
        fill="url(#grad)"
      />
      <Defs>
        <SVGRadialGradient
          id="grad"
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(187.5 50.5) rotate(90) scale(180 350.061)"
        >
          <Stop stopColor={'#3730A3'} />
          <Stop stopColor={'#0F0E26'} offset={1} />
        </SVGRadialGradient>
      </Defs>
    </Svg>
  )
}