渐变色组件

最新推荐文章于 2024-07-10 19:25:11 发布

weixin_43489042

最新推荐文章于 2024-07-10 19:25:11 发布

阅读量254

点赞数 10

文章标签： react native android react.js

本文链接：https://blog.csdn.net/weixin_43489042/article/details/137970868

版权

import { Svg, Defs, LinearGradient, Stop, Rect } from 'react-native-svg';
渐变色纵向渐变
<Svg style={{ backgroundColor: '#E8380D', height: 4 }}>
  <Defs>
    <LinearGradient id='grad' x1='0' y1='0' x2='0' y2='1' linearGradient='black, black, transparent'>
      <Stop offset={'0'} stopColor='#E8380D' stopOpacity='0.8' />
      <Stop offset={'1'} stopColor='#FF8C00' stopOpacity='1' />
    </LinearGradient>
  </Defs>
  <Rect width='100%' height='100%' fill='url(#grad)' />
</Svg>

渐变色横向渐变

<View style={{ height: 50}}>
    <Svg style={{ backgroundColor: '#E8380D', height: 50 }}>
        <Defs>
            <LinearGradient id='grad' x1='0' y1='0' x2='1' y2='0' linearGradient='black, black, transparent'>
                <Stop offset={'0'} stopColor='#F0F0F0' stopOpacity='0.7' />
                <Stop offset={'1'} stopColor='#fff' stopOpacity='1' />
            </LinearGradient>
        </Defs>
        <Rect width='100%' height='100%' fill='url(#grad)' />
    </Svg>
</View>