ios - 带有超链接的 React Native iOS 图像

我有超链接与 <Text> 一起工作，但无法让它们处理图像。我试过这个代码:

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

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

最佳答案

您需要将其包装在一个可点击的元素中，例如 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);

关于ios - 带有超链接的 React Native iOS 图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/34011552/