React Native 内联文本链接

Question

我需要将

我已经添加了并指定了必要的宽度和高度，然而现在似乎重叠了相邻的文本。

示例：

<Text>
Lorem ipsum dolor sit amet, 
  <TouchableOpacity 
        onPress={() => {Linking.openURL('http://www.example.com/')}} 
        style={{width: 108, height: 11}}>
     <Text>
           consectetur adipiscing
     </Text>
  </TouchableOpacity> 
    elit. Fusce congue malesuada euismod.
</Text>

如何最好地保持TouchableOpacity在Text组件内联？

- Steed-Asprey

Answer 1

这样怎么样？

import { Text, Linking } from 'react-native';

<Text>Hey guys I wanted to share this awesome thing just press
  <Text
    style={{color: 'red'}}
    onPress={() => {Linking.openURL('http://www.example.com/')}}
  >
    here
  </Text>
  to see it in your browser
</Text>

- Henrik R

---

这很有道理。我以为之前尝试过这种方法并出现了错误，但它确实可行。 - Steed-Asprey

抱歉，但是尽管文档强调可以使用 onPress 方法，但它并不适用于 Text 节点。无法取得任何进展。 - Nagibaba

如何使用Touchable Opacity创建内联链接？ - Dimitri Kopriwa

Answer 2

这个包将帮助您实现您想要的功能： https://www.npmjs.com/package/react-native-text-link

<TextLink 
    links = {[
        {
          text: 'consectetur adipiscing',
          onPress: () => Linking.openURL('http://www.example.com/'),
        }
    ]}
>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue malesuada euismod.
</TextLink>

- RamaProg

---

这个解决方案有什么不同于被接受的答案的地方？ - ryanwebjackson

一些小但相关的差异。1）它将允许更改 onPress 样式。Text 组件没有 onPressIn/onPressOut 属性，因此您无法处理该情况的样式。2）更好的可读性。 - RamaProg

Answer 3

上述库似乎很可靠。但由于我需要一些不同的东西，所以我自己编写了一个组件。在此分享出来，希望对其他人有所帮助。

以下内容允许您在字符串中嵌入n个链接。它允许您设置全局文本样式、全局链接样式和单独的文本和链接片段的覆盖。

// EmbeddedLinks.tsx

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: '!' },
        ]}
    />
)

结果看起来像这样...

- jmealy

Answer 4

我觉得这个库更可靠，因为它拥有每周下载次数更多。此外，在我参与的一个项目中已经使用了一年半的时间，目前还没有遇到任何问题。

- spatak