Question

我在其中一个项目中遇到Linking.openURL问题。我直截了当地说：我有一个名为“链接”的5个链接数组，我有一个函数可以将我的GUI构建为一个名为“text”的数组。

for (var i = 0; i <= 4; i++){
      await text.push(
          <View>
          <Text style={{color: '#3498db', marginBottom:5, textAlign:"left"}} onPress={async () => await Linking.openURL(links[i])}>
           {titles[i]}
           {"\n"}
           {links[i]}
           </Text>
          </View>
        )
        }

从上面可以看出，我有一个与每个链接相关联的标题，也是一个名为“标题”的数组。此函数创建一个包含5个标题的视图，当您单击每个标题时，它应使用，links.openURL（links [i]）将您重定向到相应的链接。然而，实际上最终发生的事情是所有5个标题指向同一个链接，我的数组中的最后一个链接，链接[4]。我以为我的代码是错误的所以我添加了这一行：{links [i]}来显示我的每个标题旁边的链接。然而，我更感到困惑，因为它显示每个标题旁边的正确链接，但是当试图打开任何标题时，它会引导您进入第5个链接URL。我是以错误的方式实现linking.openURL吗？（我也尝试在for循环的开头创建'var dumbyLink = links [i]'然后执行'linking.openURL（dumbyLink）'，因为我认为链接[i]可能不会立即得到评估，但是这仍然无效。）

编辑：为了确保links.openURL确实奇怪地接收了最后一个链接，我使用了这段代码：

onPress={async () => await Linking.openURL(links[i]).then(Alert.alert(links[i].toString()))}>

并在按下任何标题时得到第5个链接的警报，但是{links [i]}仍然显示正确的信息，并且该行在for循环中的linking.openURL代码之后出现，所以我很困惑。

Answer 1

如果我没有将您的问题误认为您需要打开相应的链接，并且您最终打开了所有磁贴的相同链接。然后解决您的问题是FlatList：

//display and style your elements
renderItem = ({item}) => {
      return (
        <Text style={{color: '#3498db', marginBottom:5, textAlign:"left"}} onPress={() => Linking.openURL(item)}>
         {item}
         </Text>
      )
    } 



render() {
      const extractKey = (item,index) => index
      let list = ['https://www.google.com', 'https://www.facebook.com', 'https://www.stackoverflow.com', 'https://www.github.com',
      'https://www.yahoo.com']; //random links
      return (
        <FlatList
          data={list}
          renderItem={(item) => this.renderItem(item)}
          keyExtractor={extractKey}
          />
        );
    }

上述代码在RN 0.47.1上进行了测试。希望你的困惑很明显。

React Native Linking.openURL在for循环

1 个答案: