React Native: открыть ссылку на изображение нажмите - PullRequest
Новая
       19

React Native: открыть ссылку на изображение нажмите

0 голосов
/ 02 октября 2019

У меня есть массив arr словаря, элементы которого имеют вид: 

{url: 'https://stackoverflow.com/', picUrl: 'link to pic', ...}

Я хочу открыть ссылку i-th при нажатии на изображение i-th. Мой код выглядит так: 

arr = this.example[key];
var arrayLength = arr.length;
for(var i = 0; i < arrayLength; i++) {
  console.log(arr[i]);
  console.log(arr[i].url);
  var x = arr[i].url;
  views.push(
    <View>
      <ImageBackground
        source={{uri: arr[i].picUrl}}
        style={{ width: '100%',aspectRatio: 1, height: undefined }}>
        <TouchableOpacity
          onPress={() => Linking.openURL(x)}
// or     onPress={() => Linking.openURL(arr[i].url)}
          style={{flex: 1}}>
        </TouchableOpacity>
      </ImageBackground>
      .....

Когда я нажимаю на изображение, я получаю эту ошибку: 

undefined is not an object (evaluating 'arr[i].url')

Затем я убедился, что arr [i] и т. Д. Не определены:

console.log(arr[i])
console.log(arr[i].url)

и получил правильные значения ('https://stackoverflow.com/' для этого примера).

Когда я жестко кодирую значение в 'https://stackoverflow.com/', кажется, что все работает нормально, что означает, что есть проблематолько с линией Linking.openURL(arr[i].url). Что именно? Я не знаю: (

Я застрял в этой проблеме в течение достаточно долгого времени, видел несколько сообщений, связанных с этим, но ничего не помогло. Может кто-нибудь помочь мне решить эту проблему? Спасибо ...

Обновление:

Я изменил onPress={() => Linking.openURL(arr[i].url)} на: 

onPress={() => Alert.alert(arr[i])}

и получил совершенно пустое предупреждение!

Затем я сделал: 

var x = arr[i].url

и изменил предыдущую строку на: 

onPress={() => Linking.openURL(x)}

Теперь для всех изображений ссылка установлена ​​на arr[length-1].url,то есть его значение равно значению url самого последнего изображения в массиве!

1 Ответ

1 голос
/ 02 октября 2019

Вы можете сначала проверить, может ли приложение обрабатывать этот URL, используя canOpenURL

<TouchableOpacity
    onPress={() => Linking.canOpenURL(arr[i].url)
                     .then((supported) => {
                       if (!supported) {
                         console.log("Can't handle url: " + arr[i].url);
                       } else {
                         return Linking.openURL(arr[i].url);
                       }
                     })
                     .catch((err) => console.error('An error occurred', err));
    }
    style={{flex: 1}}>
      <ImageBackground
         source={{uri: arr[i].picUrl}}
         style={{ width: '100%',aspectRatio: 1, height: undefined }}>
      </ImageBackground>
</TouchableOpacity>

Обновление

вместодля цикла вы можете использовать map, 

let views = arr.map(data => <View>
      <ImageBackground
        source={{uri: data.picUrl}}
        style={{ width: '100%',aspectRatio: 1, height: undefined }}>
        <TouchableOpacity
          onPress={() => Linking.openURL(data.url)}
          style={{flex: 1}}>
        </TouchableOpacity>
      </ImageBackground>
</View>
)
...