Как создать градиентный текст в react-native
Я хочу создать текст с линейным градиентом цвета в 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?
Я использовал этот код: github.com/iyegoroff/react-native-text-gradient/blob/master/…
Привет, @LauKumra, response-native-text-gradient не будет работать с expo, потому что он содержит собственный код, который не включен в expo sdk - docs.expo.io/versions/v28.0.0/introduction/…. Вы можете использовать мой модуль только в приложении с исходной реакцией.
Ответы 3
использовать [реагировать на родной 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>
Есть 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>
Результат будет таким:
Больше информации о response-native-linear-gradient здесь:
https://github.com/react-native-community/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>
Вы можете написать о вашем коде?