React Native：点击图片打开 link

Question

我有一个字典数组 arr，其元素如下：

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

我想在单击 i-th 图像时打开 i-th link。我的代码如下：

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://whosebug.com/'）。

当我将值硬编码为 'https://whosebug.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)}

现在，对于所有的图像，link设置为arr[length-1].url，也就是说，它等于最后一张图像的url的值数组！

Answer 1

您可以先检查应用是否可以使用 canOpenURL

处理此 URL

<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、

而不是 for 循环

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

React Native：点击图片打开 link

React Native: Open link on image click

react-native

react-native-android