React Native内联文本链接

wj8zmpe1 于 2022-12-14 发布在 React

关注(0)|答案(3)|浏览(140)

我需要链接Text组件中的选择文本以指向外部URL。
我已经包含了一个TouchableOpacity，并根据需要指定了宽度和高度，但是TouchableOpacity现在似乎与相邻文本重叠。
示例：

<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>

在Text组件中保持TouchableOpacity内联的最佳方法是什么？

react-native

来源：https://stackoverflow.com/questions/41048942/react-native-inline-text-link

3条答案

按热度按时间

yrdbyhpb1#

像这样怎么样？

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>

赞(0）回复(0）举报 2022-12-14

jjjwad0x2#

此套装课程将帮助您实现您的目标：
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>

赞(0）回复(0）举报 2022-12-14

mqxuamgl3#

我对**this lib更有信心，因为它有更多的每周下载**此外，它已经在我工作的一个项目上工作了1年半。还没有遇到任何问题

赞(0）回复(0）举报 2022-12-14