React Native iOS image с гиперссылкой

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