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

【问题标题】：react native get all links from a textreact native 从文本中获取所有链接
【发布时间】：2021-06-06 04:07:40
【问题描述】：

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

someFunction.getLinks('Any links to github.com here? If not, contact test@example.com');

应该返回类似的东西

[
  {
    type: 'url',
    value: 'github.com',
    href: 'http://github.com'
  },
  {
    type: 'email',
    value: 'test@example.com',
    href: 'mailto:test@example.com'
  }
]

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

【问题讨论】：

标签： reactjs react-native linkify

【解决方案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 test@example.com'
  );

  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,
  },
});

【讨论】：