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

Question

我想在 React Native 中获取文本中的所有链接。喜欢

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

哪个应该return类似

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

这在 react 中使用 Linkify 是可能的，但我们如何在 React Native 中做到这一点？

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

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

react native get all links from a text

linkify

reactjs

react-native