reactjs 几个文字有线性渐变颜色- React native

ewm0tg9j 于 2023-04-29 发布在 React

关注(0)|答案(1)|浏览(126)

我想有一些文字的线性渐变颜色。检查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;

如果里面的 Package 没有达到预期效果-

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

Flex没有帮助，因为使用它无法实现多行句子。
所需输出的附加图像。请帮帮忙

reactjs

来源：https://stackoverflow.com/questions/76131827/few-words-of-text-to-have-linear-gradient-color-react-native

1条答案

按热度按时间

nsc4cvqm1#

修改GradientText组件以接受子项并将渐变分别应用于每个字符。
下面是工作示例：

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

interface GradientTextProps extends TextProps {
  children: React.ReactNode;
  style?: TextStyle;
}

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <GradientText style={{ fontSize: 40 }}>{`Hello World
      Hello World
      Hello World
      `}</GradientText>
    </View>
  );
}

赞(0）回复(0）举报 2023-04-29

我来回答

reactjs 几个文字有线性渐变颜色- React native

1条答案

相关问题

热门标签

最新问答