1import React, {useState} from 'react'; 2import {GestureResponderEvent, StyleSheet, TextProps} from 'react-native'; 3import {fontSizeConst, fontWeightConst} from '@/constants/uiConst'; 4import openUrl from '@/utils/openUrl'; 5import ThemeText from './themeText'; 6import Color from 'color'; 7 8type ILinkTextProps = TextProps & { 9 fontSize?: keyof typeof fontSizeConst; 10 fontWeight?: keyof typeof fontWeightConst; 11 linkTo?: string; 12 onPress?: (event: GestureResponderEvent) => void; 13}; 14 15export default function LinkText(props: ILinkTextProps) { 16 const [isPressed, setIsPressed] = useState(false); 17 18 return ( 19 <ThemeText 20 {...props} 21 style={[style.linkText, isPressed ? style.pressed : null]} 22 onPressIn={() => { 23 setIsPressed(true); 24 }} 25 onPress={evt => { 26 if (props.onPress) { 27 props.onPress(evt); 28 } else { 29 props?.linkTo && openUrl(props.linkTo); 30 } 31 }} 32 onPressOut={() => { 33 setIsPressed(false); 34 }}> 35 {props.children} 36 </ThemeText> 37 ); 38} 39 40const style = StyleSheet.create({ 41 linkText: { 42 color: '#66ccff', 43 textDecorationLine: 'underline', 44 }, 45 pressed: { 46 color: Color('#66ccff').alpha(0.4).toString(), 47 }, 48}); 49