React Native Linking.openURL在循環中無法按預期方式工作

我在我的一個項目中遇到Linking.openURL問題。不幸的是，我有一個名爲「鏈接」的5個鏈接的數組，我有一個函數將我的GUI構建到一個名爲「text」的數組中。React Native Linking.openURL在循環中無法按預期方式工作

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個標題的視圖，當你點擊每個標題時，它應該使用linking.openURL（links [i]）將你重定向到相應的鏈接。然而，最終發生的實際情況是所有5個標題都指向相同的鏈接，即我的數組中的最後一個鏈接，鏈接[4]。我認爲我的代碼是錯誤的，所以我添加了這一行：{links [i]}在每個標題旁顯示我的鏈接。然而，我更加困惑，因爲它顯示每個標題旁邊的正確鏈接，但是當試圖打開任何標題時，它會將您引導至第5個鏈接URL。我是否以錯誤的方式實現linking.openURL？（我也嘗試在for循環開始時創建'var dumbyLink = links [i]'，然後執行'linking.openURL（dumbyLink）'，因爲我認爲鏈接[i]可能不會立即得到評估，但這仍然沒有工作）

編輯：只是爲了確保linking.openURL確實奇怪收到的最後一個環節，我用這個代碼：

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

和的得到了一個警報按下任何標題時的第5個鏈接，但是{links [i]}仍然顯示正確的信息，並且該行位於for循環中的linking.openURL代碼之後，所以我感到困惑。

來源

2017-08-11 ghost

如果我沒有把你的問題弄錯，你需要打開相應的鏈接，並且你最終打開所有圖塊的鏈接。然後解決問題的方法是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。希望測試你的困惑是明確的。

來源

2017-08-11 20:47:48

React Native Linking.openURL在循環中無法按預期方式工作

回答

相關問題