我想在react-native中创建具有线性渐变颜色的文本,但是找不到合适的方法或软件包来执行此操作。我尝试使用此软件包:https://github.com/iyegoroff/react-native-text-gradient。但是,在尝试使用expo运行示例时,它给了我以下错误:
TypeError: Cannot read property 'x' of undefined
This error is located at:
in RNLinearTextGradient (at App.js:26)
in RCTView (at View.js:60)
in View (at App.js:17)
in App (at registerRootComponent.js:35)
in RootErrorBoundary (at registerRootComponent.js:34)
in ExpoRootComponent (at renderApplication.js:33)
in RCTView (at View.js:60)
in View (at AppContainer.js:102)
in RCTView (at View.js:60)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:32)
at linear-text-gradient.js:16
at Object.render (create-text-gradient-class.js:219)
at finishClassComponent (ReactNativeRenderer-dev.js:8811)
at updateClassComponent (ReactNativeRenderer-dev.js:8761)
at beginWork (ReactNativeRenderer-dev.js:9580)
at performUnitOfWork (ReactNativeRenderer-dev.js:12924)
at workLoop (ReactNativeRenderer-dev.js:12953)
at renderRoot (ReactNativeRenderer-dev.js:12996)
at performWorkOnRoot (ReactNativeRenderer-dev.js:13632)
at performWork (ReactNativeRenderer-dev.js:13545)
请您帮我解决这个问题,还是找到另一种在react-native中创建渐变文本的方法?
答案 0 :(得分:2)
使用[反应本机svg] [1]
[1]:例如https://github.com/react-native-community/react-native-svg
import Svg, {
LinearGradient,
Text,
Defs,
Stop,
TSpan
} from 'react-native-svg';
<Svg viewBox="0 0 300 300" height="300"
width="300">
<Defs>
<LinearGradient id="rainbow" x1="0" x2="0" y1="0" y2="100%" gradientUnits="userSpaceOnUse" >
<Stop stopColor="#FF5B99" offset="0%" />
<Stop stopColor="#FF5447" offset="20%" />
<Stop stopColor="#FF7B21" offset="40%" />
<Stop stopColor="#EAFC37" offset="60%" />
<Stop stopColor="#4FCB6B" offset="80%" />
<Stop stopColor="#51F7FE" offset="100%" />
</LinearGradient>
</Defs>
<Text fill="url(#rainbow)">
<TSpan
fonSize="72"
x="0"
y="72"
>
gradient
</TSpan>
<TSpan fonSize="72" x="0" dy="72">text</TSpan>
<TSpan fonSize="72" x="0" dy="72">all up in here</TSpan>
</Text>
</Svg>
答案 1 :(得分:0)
有2个软件包可用于渐变文本:
1)react-native-text-gradient
<LinearTextGradient
style={{ fontWeight: 'bold', fontSize: 72 }}
locations={[0, 1]}
colors={['red', 'blue']}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
>
THIS IS TEXT GRADIENT
</LinearTextGradient>
结果如下:
来源:https://github.com/iyegoroff/react-native-text-gradient
2)react-native-linear-gradient
:
import LinearGradient from 'react-native-linear-gradient';
const styles = StyleSheet.create({
text: {
color: 'black',
fontSize: 14,
},
gradient: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
});
<View>
<View>
<Text style={styles.text}>
This is a gradiented text
</Text>
<Text style={styles.text}>
This is a gradiented text
</Text><Text style={styles.text}>
This is a gradiented text
</Text><Text style={styles.text}>
This is a gradiented text
</Text><Text style={styles.text}>
This is a gradiented text
</Text>
</View>
<LinearGradient
start={{ x: 0.0, y: 0.0 }}
end={{ x: 0.0, y: 1.0 }}
locations={[0.0, 1.0]}
colors={['#ffffff40', '#fffffff5']} //<-- last 2 chars from color control the opacity
useViewFrame={false}
style={styles.gradient}
/>
<View>
结果将如下所示:
此处有react-native-linear-gradient的更多信息:
https://github.com/react-native-community/react-native-linear-gradient
答案 2 :(得分:0)
使用 @react-native-community/masked-view 和 react-native-linear-gradient 实现文本渐变
第 1 步:创建我们的自定义 GradientText 组件
import React from "react";
import { Text } from "react-native";
import MaskedView from "@react-native-community/masked-view";
import LinearGradient from "react-native-linear-gradient";
const GradientText = (props) => {
return (
<MaskedView maskElement={<Text {...props} />}>
<LinearGradient
colors={["red", "green"]}
start={{ x: 0, y: 0 }}
end={{ x: 1, y: 0 }}
>
<Text {...props} style={[props.style, { opacity: 0 }]} />
</LinearGradient>
</MaskedView>
);
};
export default GradientText;
第 2 步:使用我们的 GradientText 组件
<GradientText style={styles.textStyle}>Hello world</GradientText>