Question

我有一个字典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值！

Answer 1

您可以先使用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代替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：点击图片打开链接

1 个答案: