在React Native App中显示超链接

Question

如何在React Native应用程序中显示超链接？

例如

<a href="https://google.com>Google</a> 

Answer 1

像这样的东西:

IOS:

<Text style={{color: 'blue'}}
      onPress={() => Linking.openURL('http://google.com')}>
  Google
</Text>

使用Linking与React Native捆绑在一起的模块.

安卓:

<Text style={{color: 'blue'}}
      onPress={() => Linking.openURL('http://google.com')}>
  Google
</Text>

使用Linking与React Native捆绑在一起的模块.

Answer 2

所选答案仅指iOS.对于这两个平台,您可以使用以下组件:

import React, { Component, PropTypes } from 'react';
import {
  Linking,
  Text,
  StyleSheet
} from 'react-native';

export default class HyperLink extends Component {

  constructor(){
      super();
      this._goToURL = this._goToURL.bind(this);
  }

  static propTypes = {
    url: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
  }

  render() {

    const { title} = this.props;

    return(
      <Text style={styles.title} onPress={this._goToURL}>
        >  {title}
      </Text>
    );
  }

  _goToURL() {
    const { url } = this.props;
    Linking.canOpenURL(url).then(supported => {
      if (supported) {
        Linking.openURL(this.props.url);
      } else {
        console.log('Don\'t know how to open URI: ' + this.props.url);
      }
    });
  }
}

const styles = StyleSheet.create({
  title: {
    color: '#acacac',
    fontWeight: 'bold'
  }
});

Answer 3

为此,我强烈考虑将Text组件包装在一个组件中TouchableOpacity.当TouchableOpacity触摸a时,它会消失(变得不那么不透明).这为用户在触摸文本时提供了即时反馈,并提供了改进的用户体验.

您可以使用该onPress属性TouchableOpacity来实现链接:

<TouchableOpacity onPress={() => Linking.openURL('http://google.com')}>
  <Text style={{color: 'blue'}}>
    Google
  </Text>
</TouchableOpacity>

Answer 4

React Native文档建议使用Linking：

参考

这是一个非常基本的用例：

import { Linking } from 'react-native';

const url="https://google.com"

<Text onPress={() => Linking.openURL(url)}>
    {url}
</Text>

您可以使用功能性或类组件符号，由经销商选择。

Answer 5

添加到上述响应的另一个有用的注释是添加一些 flexbox 样式。这将使文本保持在一行上，并确保文本不会与屏幕重叠。

 <View style={{ display: "flex", flexDirection: "row", flex: 1, flexWrap: 'wrap', margin: 10 }}>
  <Text>Add your </Text>
  <TouchableOpacity>
    <Text style={{ color: 'blue' }} onpress={() => Linking.openURL('https://www.google.com')} >
         link
    </Text>
   </TouchableOpacity>
   <Text>here.
   </Text>
 </View>

Answer 6

使用 React Native Hyperlink（原生<A>标签）：

安装：

npm i react-native-a

进口：

import A from 'react-native-a'

用法：

1. <A>Example.com</A>
2. <A href="example.com">Example</A>
3. <A href="https://example.com">Example</A>
4. <A href="example.com" style={{fontWeight: 'bold'}}>Example</A>

Answer 7

以下是如何实现一个带下划线的超链接，并且具有单击时更改颜色的网络标准行为（如 CSS a:active）。

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

  <Pressable onPress={() => Linking.openURL('https://example.com')}>
    {({ pressed }) =>
      <Text style={{
        textDecorationLine: 'underline',
        color: pressed ? 'red' : 'blue'
      }}>I'm a hyperlink!</Text>
    }
  </Pressable>

• 一些现有的答案使用和Text，但文档指出它比 更“面向未来” ，所以我们改用。LinkingTouchableOpacityPressableTouchableOpacityPressable
• Text其本身实际上具有onPress()属性，因此TouchableOpacity对于简单地处理新闻来说是不必要的。然而，仅用它来实现颜色样式的改变似乎是不可能的Text。