如何在 React Native App 中显示超链接?
2022-08-30 01:45:45
如何在 React Native 应用程序中显示超链接?
例如:
<a href="https://google.com>Google</a>
如何在 React Native 应用程序中显示超链接?
例如:
<a href="https://google.com>Google</a>
像这样:
<Text style={{color: 'blue'}}
onPress={() => Linking.openURL('http://google.com')}>
Google
</Text>
使用与 React Native 捆绑在一起的模块。Linking
import { Linking } from 'react-native';
所选答案仅指 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'
}
});