Question

我有超链接与<Text>正常工作，但无法让他们使用图片。我试过这段代码：

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

不能诚实地想到会采取任何其他方式。它不会引发任何错误，但点击它不会做任何事情。

Answer 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);

使用超链接反应原生iOS图像

1 个答案: