文本的几个词具有线性渐变颜色 - React native

问题描述 投票:0回答:0

我想要一些线性渐变颜色的文字。检查desired output

实现渐变文字我在做-

import React from 'react';
import {Text} from 'react-native';
import LinearGradient from 'react-native-linear-gradient';
import MaskedView from '@react-native-masked-view/masked-view';

const GradientText = props => {
  return (
    <MaskedView maskElement={<Text {...props} />}>
      <LinearGradient
        colors={['red', 'green', 'blue']}
        start={{x: 0, y: 0}}
        end={{x: 1, y: 0}}>
        <Text {...props} style={[props.style, {opacity: 0}]} />
      </LinearGradient>
    </MaskedView>
  );
};

export default GradientText;

当内部包装没有给出所需的结果时 -

<Text style={{color: 'white'}}>
    hello
    <GradientText>Gradient Text here</GradientText>
 </Text>

Flex 没有帮助,因为使用它无法实现多行句子。

所需输出的附加图像。请帮助

reactjs react-native text linear-gradients maskedinput
© www.soinside.com 2019 - 2024. All rights reserved.