推荐开源项目:React Native Parsed Text - 灵活的文本解析库
import React from 'react';
import { View, Text } from 'react-native';
import ParsedText from 'react-native-parsed-text';
const urlRegex = /(https?:\/\/|www\.)[^\s]+/g;
const phoneRegex = /\+?\d{1,4}?[-.\s]?<span class="katex">\(?\d{1,6}\)</span>?[-.\s]?\d{1,4}[-.\s]?\d{1,4}/g;
const emailRegex = /[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}/ig;
const hashTagRegex = /#\w+/g;
const CustomText = () => (
<View>
<ParsedText
text={"Visit https://github.com/taskrabbit/react-native-parsed-text for more info. Call 1-800-555-1212 or email someone@example.com to learn more. Mention @TaskRabbit on social media."}
parse={[
{ type: 'url', style: { color: 'blue' }, onPress: (url) => console.log(url) },
{ type: 'phone', style: { color: 'blue' }, onPress: (phone) => console.log(phone) },
{ type: 'email', style: { color: 'blue' }, onPress: (email) => console.log(email) },
{ type: 'hashTag', style: { color: 'blue' }, onPress: (hashTag) => console.log(hashTag) },
]}
/>
</View>
);
export default CustomText;
这个代码实例展示了如何使用ParsedText
组件来解析并展示一段文本内容,其中包括URL链接、电话号码、电子邮件地址和哈希标签。每种解析类型都可以定义自己的样式和点击事件处理函数。这个例子简洁明了,并且清晰地展示了如何使用这个库来增强React Native应用中文本的交互性。
评论已关闭