react native 从文本中获取所有链接

Posted 2023-05-09

【中文标题】react native 从文本中获取所有链接

【英文标题】：react native get all links from a text

【发布时间】：2021-06-06 04:07:40

【问题描述】：

我想从反应原生的文本中获取所有链接。喜欢

someFunction.getLinks('Any links to github.com here? If not, contact [e-mail]');

应该返回类似的东西

[
  
    type: 'url',
    value: 'github.com',
    href: 'http://github.com'
  ,
  
    type: 'email',
    value: '[e-mail]',
    href: 'mailto:[e-mail]'
  
]

react 中的 Linkify 可以做到这一点，但我们如何在 react native 中做到这一点？

【参考方案1】：

工作应用：Expo Snack

import * as React from 'react';
import  Text, View, StyleSheet, FlatList  from 'react-native';
import Constants from 'expo-constants';
var linkify = require('linkifyjs');

import  Card  from 'react-native-paper';

export default function App() 
  const data = linkify.find(
    'Any links to github.com here? If not, contact [e-mail]'
  );

  console.log(JSON.stringify(data));
  return (
    <View style=styles.container>
      <FlatList
        data=data
        renderItem=( item ) => (
          <View
            style=
              padding: 10,
              backgroundColor: 'rgba(255,0,0,0.1)',
              marginTop: 5,
            >
            <Text style=styles.paragraph>`type: $item.type`</Text>
            <Text style=styles.paragraph>`type: $item.value`</Text>
            <Text style=styles.paragraph>`type: $item.href`</Text>
          </View>
        )
      />
    </View>
  );


const styles = StyleSheet.create(
  container: 
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  ,
  paragraph: 
    fontSize: 18,
  ,
);