如何在 react-native (web/android/ios) 的图像上创建 link？

Question

我想在我的着陆页上显示 App Store 可用 和 Google Play 可用的两个可点击图像我也用 react-native-web.

我可以创建一个 <ExternalLink /> 组件，但它看起来并不像正常的 <a> （目前没有悬停或效果 => 丑陋）。

import React from 'react';
import { Text } from 'react-native';

const ExternalLink = (props) => (
  <Text 
    {...props} 
    accessibilityRole="link" 
    target="_blank" 
  />
);

export default ExternalLink;

我已经尝试在 <Image /> 周围使用该组件，就像您通常在网络中使用 <a target="_blank" href="https://www.google.com"><Image src={availableOnGooglePlay} /></a> 一样。

更一般地说，如何为所有设备（iOS、Android、Web）在 react-native 中的图像上创建 link？

Answer 1

我会使用任何 Touchable 组件来实现此目的，我检查了 RN Web 文档，它们大部分已被移植。这是一个小例子：

export default class ExternalLink extends Component {

    _openLink = async () => {
        const { link } = this.props;

        if (await Linking.canOpenURL(link)) {
            Linking.openURL(link);
        }
    }

    render() {
        const { children } = this.props;

        return (
            <TouchableOpacity accessibilityRole='link' onPress={this._openLink}>
                {children}
            </TouchableOpacity>
        );
    }
}

然后你可以像这样使用：

<ExternalLink link='YOUR_LINK_HERE'>
    <Image source='YOUR_IMAGE_URL_HERE' />
</ExternalLink>

如何在 react-native (web/android/ios) 的图像上创建 link？

How to create a link on an image in react-native (web/android/ios)?

javascript

reactjs

react-native

react-native-android

react-native-web