taro rn 端实现背景渐变文本渐变

最新推荐文章于 2024-07-06 00:01:24 发布

clearly_lll1

最新推荐文章于 2024-07-06 00:01:24 发布

阅读量246

点赞数 2

文章标签： taro react native react.js

本文链接：https://blog.csdn.net/qq_48612020/article/details/137753190

版权

taro rn 端实现背景渐变文本渐变

背景渐变

yarn add react-native-linear-gradient

import LinearGradient from 'react-native-linear-gradient';

<LinearGradient
colors={['white', 'red']}
style={{ width: 375, height: 200 }}
start={{ x: 0, y: 0 }} // 设置渐变起点坐标
end={{ x: 1, y: 0 }} // 设置渐变终点坐标
>
    <View style={{ flex: 1 }}>
    	<Text style={{ fontSize: 30, color: 'white' }}>渐变背景的内容</Text>
    </View>
</LinearGradient>

文本渐变

yarn add react-native-svg

import Svg, { Defs, LinearGradient, Stop, Text as SvgText } from 'react-native-svg';

<Svg width="100%" height="100%">
    <Defs>
        <LinearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <Stop offset="0%" stopColor="white" />
            <Stop offset="100%" stopColor="red" />
        </LinearGradient>
    </Defs>
    <SvgText
        fill="url(#gradient)"
        fontSize={24}
        fontWeight="bold"
        textAnchor="middle"
        x="50%"
        y="50%"
    >
    	渐变色文字
    </SvgText>
</Svg>