76 lines
1.9 KiB
TypeScript
76 lines
1.9 KiB
TypeScript
import React from 'react'
|
|
import { View, StyleSheet } from 'react-native'
|
|
import GradientText from './GradientText'
|
|
|
|
/**
|
|
* 渐变文字使用示例
|
|
*/
|
|
export default function GradientTextExample() {
|
|
return (
|
|
<View style={styles.container}>
|
|
{/* 水平渐变 */}
|
|
<GradientText
|
|
colors={['#FF9966', '#FF6699', '#9966FF']}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 0 }}
|
|
style={styles.text}
|
|
>
|
|
水平渐变文字
|
|
</GradientText>
|
|
|
|
{/* 垂直渐变 */}
|
|
<GradientText
|
|
colors={['#9966FF', '#FF6699', '#FF9966']}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 0, y: 1 }}
|
|
style={styles.text}
|
|
>
|
|
垂直渐变文字
|
|
</GradientText>
|
|
|
|
{/* 对角线渐变 */}
|
|
<GradientText
|
|
colors={['#FF9966', '#FF6699', '#9966FF']}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 1 }}
|
|
style={styles.largeText}
|
|
>
|
|
对角线渐变
|
|
</GradientText>
|
|
|
|
{/* 两色渐变 */}
|
|
<GradientText
|
|
colors={['#FF6699', '#9966FF']}
|
|
start={{ x: 0, y: 0 }}
|
|
end={{ x: 1, y: 0 }}
|
|
style={styles.boldText}
|
|
>
|
|
两色渐变
|
|
</GradientText>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
padding: 20,
|
|
gap: 30,
|
|
},
|
|
text: {
|
|
fontSize: 24,
|
|
fontWeight: '600',
|
|
},
|
|
largeText: {
|
|
fontSize: 32,
|
|
fontWeight: 'bold',
|
|
},
|
|
boldText: {
|
|
fontSize: 28,
|
|
fontWeight: 'bold',
|
|
},
|
|
})
|
|
|