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

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创建图像链接？

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>