用超链接反应原生 iOS 图像

Posted 2023-03-15

【中文标题】用超链接反应原生 iOS 图像

【英文标题】：React Native iOS image with hyperlink

【发布时间】：2015-12-01 02:23:22

【问题描述】：

我的超链接可以与<Text> 一起使用，但无法让它们与图像一起使用。我试过这段代码：

    <Image onPress=() =>
         Linkingios.openURL('https://website.com')
      source=require('./images/picture.png')>
    </Image>

老实说，我想不出任何其他方式可以做到这一点。它不会抛出任何错误，但单击它不会执行任何操作。

【参考方案1】：

您需要将其包装在可点击元素中，例如 TouchableOpacity、TouchableHighlight 或 TouchableWithoutFeedback：

<TouchableHighlight 
  onPress=() => LinkingIOS.openURL('https://website.com')>
  <Image 
    source=uri: 'http://cf.ltkcdn.net/socialnetworking/images/std/168796-281x281-girl-swear-icon.png' 
    style=height:50, width:50 />
</TouchableHighlight>

我已经设置了一个工作示例here。完整的代码也在下面。

https://rnplay.org/apps/JTSSWQ

'use strict';

var React = require('react-native');
var 
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Image,
  LinkingIOS
 = React;

var SampleApp = React.createClass(
  render: function() 
    return (
      <View style=styles.container>
        <TouchableHighlight onPress=() =>
             LinkingIOS.openURL('https://website.com')>
            <Image 
          source=uri: 'http://cf.ltkcdn.net/socialnetworking/images/std/168796-281x281-girl-swear-icon.png' style=height:50, width:50 />
         </TouchableHighlight>
      </View>
    );
  
);

var styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  ,
  welcome: 
    fontSize: 28,
    textAlign: 'center',
    margin: 10,
  ,
  instructions: 
    textAlign: 'center',
    color: '#333333',
    fontSize: 19,
    marginBottom: 5,
  ,
);

AppRegistry.registerComponent('SampleApp', () => SampleApp);

【讨论】：

好的，太好了。我想知道为什么即使没有 Touchablehighlight， 属性也是可点击的链接？无论如何，它有效，非常感谢。