前端之家

  1. 首页
  2. 问答

检测链接并在react native中返回另一个视图

• 问答

我的代码：

const orderResultJson = [
  {
    key: 'Скачайте приложение по ссылке',value: 'https://google.com'
  },{
    key: 'Логин',value: 'https://instagram.com'
  },{
    key: 'Пароль',value: '849846'
  },];

function DetailsSection({ item }){
  return(
     <View>
        <Text>{item.key}</Text>
        <Text> {replaceURLWithHTMLLinks(item.value) ? 'Cсылка' : 'No'} </Text>
    </View>
  )
}
  function replaceURLWithHTMLLinks(text)
    {
        var expression =  
/[-a-zA-Z0-9@:%_\+.~#?&//=]{2,256}\.[a-z]{2,4}\b(\/[-a-zA-Z0-9@:%_\+.~#?&//=]*)?/gi; 
        var regex = new RegExp(expression); 
        var url = text; 
        url.match(regex) ? true : false;

} 

render() {
    return (
     ........
        <flatList
          .......
          renderItem={({item}) => <DetailsSection item={item} />} 
          keyExtractor={item => item.key} 
        />
      .....
}

我在DetailsS​​ection函数中确实有一个条件。逻辑如下：

如果{item.value}包含链接，则向其显示“一些随机文本”

如果不是，则显示“否”

目前，我还没有完全理解这个问题。一切似乎都运行良好，但DetailsS​​ection内部的条件流仅显示否。但是在JSON中，我确实具有超链接。有什么建议吗？

lilyweiwei 回答：检测链接并在react native中返回另一个视图

也许您错过了replaceURLWithHTMLLinks函数中的“ return”语句：

...
return url.match(regex) ? true : false;
...
,

我认为您使用的正则表达式不允许在URL开头使用https：//。而且您还忘记了从函数返回布尔值。尝试使用此：

function replaceURLWithHTMLLinks(text)
    {
        var expression =  /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi; 
        var regex = new RegExp(expression); 
        var url = text; 
        return url.match(regex) ? true : false;

}
hyperlinkjavascriptjsonreact-nativereactjs
本文链接：https://www.f2er.com/3124467.html

大家都在问