上述库似乎很可靠。但由于我需要一些不同的东西,所以我自己编写了一个组件。在此分享出来,希望对其他人有所帮助。
以下内容允许您在字符串中嵌入n个链接。它允许您设置全局文本样式、全局链接样式和单独的文本和链接片段的覆盖。
import { StyleProp, Text, TextStyle } from "react-native"
import { useNavigate } from "react-router-native"
export type TextSnippet = {
text: string
style?: StyleProp<TextStyle>
destination?: string
}
export const EmbeddedLinks: React.FC<{
textSnippets: Array<TextSnippet>
linkStyle?: StyleProp<TextStyle>
textStyle?: StyleProp<TextStyle>
}> = ({
textSnippets,
linkStyle = { color: 'blue' },
textStyle = {}
}) => {
const navigate = useNavigate()
return <Text style={textStyle || {}} >
{textSnippets.map(({ text, style = {}, destination }) => {
let props: {
style: StyleProp<TextStyle>
onPress?: () => unknown
}
if (destination) {
props = {
onPress: () => navigate(destination),
style: [linkStyle, style]
}
} else {
props = {
style: [textStyle, style]
}
}
return <Text {...props}>{text}</Text>
})}
</Text >
}
使用方法如下...
import { EmbeddedLinks } from "../components/EmbeddedLinks"
const LinkedEmbeddedText = () => (
<EmbeddedLinks
textStyle={{
fontSize: 16
}}
textSnippets={[
{ text: 'Either ' },
{
text: 'go here',
destination: 'path/to/here',
},
{
text: ' or ',
style: { fontWeight: 'bold' }
},
{
text: 'go there',
destination: 'path/to/there',
},
{ text: '!' },
]}
/>
)
结果看起来像这样...
![在此输入图片描述](https://istack.dev59.com/zfhb8.webp)