如何在 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>