React native 如何检测链接表单字符串并转换为链接？
我希望用户能够从注释（字符串）中获取链接，类似于链接 有没有一种简单的方法可以做到这一点 我相信这是在这里解决的（） 但我不太确定如何实施它 谢谢。我根据中的组件做了一个测试 我无法在那种环境下测试LinkingIOS，但这些应该可以让你达到目的 以下是原始来源：React native 如何检测链接表单字符串并转换为链接？,react-native,React Native,我希望用户能够从注释（字符串）中获取链接，类似于链接 有没有一种简单的方法可以做到这一点 我相信这是在这里解决的（） 但我不太确定如何实施它 谢谢。我根据中的组件做了一个测试 我无法在那种环境下测试LinkingIOS，但这些应该可以让你达到目的 以下是原始来源： var HyperText = React.createClass({ render: function() { // Check if nested content is a plain string if
var HyperText = React.createClass({
render: function() {
// Check if nested content is a plain string
if (typeof this.props.children === 'string') {
// Split the content on space characters
var words = this.props.children.split(/\s/);
// Loop through the words
var contents = words.map(function(word, i) {
// Space if the word isn't the very last in the set, thus not requiring a space after it
var separator = i < (words.length - 1) ? ' ' : '';
// The word is a URL, return the URL wrapped in a custom <Link> component
if (word.match(/^https?\:\//)) {
return <Link key={i} url={word}>{word}{separator}</Link>;
// The word is not a URL, return the word as-is
} else {
return word + separator;
}
});
// The nested content was something else than a plain string
// Return the original content wrapped in a <Text> component
} else {
console.log('Attempted to use <HyperText> with nested components. ' +
'This component only supports plain text children.');
return <Text>{this.props.children}</Text>;
}
// Return the modified content wrapped in a <Text> component
return (
<Text>
{contents}
</Text>
);
}
});
var Link = React.createClass({
render: function() {
return <Text onPress={this.openUrl.bind(this, this.props.url)}>{this.props.children}</Text>;
},
openUrl: function(url) {
LinkingIOS.canOpenURL(url, (supported) => {
if (!supported) {
AlertIOS.alert('Can\'t handle url: ' + url);
} else {
LinkingIOS.openURL(url);
}
});
}
});
var HyperText=React.createClass({
render:function（）{
//检查嵌套内容是否为普通字符串
if（this.props.children的类型=='string'）{
//按空格字符拆分内容
var words=this.props.children.split（/\s/）；
//循环读单词
var contents=words.map（函数（word，i）{
//如果单词不是集合中的最后一个，则不需要在后面加空格
变量分隔符=i<（words.length-1）？“”；
//如果单词是URL，则返回包装在自定义组件中的URL
if（word.match（/^https？\：\/））{
返回{word}{separator}；
//单词不是URL，请按原样返回单词
}否则{
返回字+分隔符；
}
});
//嵌套内容不是普通字符串
//返回包装在组件中的原始内容
}否则{
console.log（'试图与嵌套组件一起使用。'+
“此组件仅支持纯文本子级。”）；
返回{this.props.children}；
}
//返回包装在组件中的修改内容
返回(
{contents}
);
}
});
var Link=React.createClass({
render:function（）{
返回{this.props.children}；
},
openUrl:函数（url）{
LinkingIOS.canOpenURL（url，（支持）=>{
如果（！受支持）{
AlertIOS.alert（'无法处理url:'+url）；
}否则{
LinkingIOS.openURL（url）；
}
});
}
});
从“反应本机超链接”导入超链接
从“react native”导入{Text，Linking}
常量MyComponent=（）=>(
{“点击https://stackoverflow.com 测试“}
)
超链接标签提及电子邮件电话号码import Autolink from 'react-native-autolink';
class MyComponent extends Component {
render() {
return (
<Autolink
text="This is the string to parse for urls (https://github.com/joshswan/react-native-autolink), phone numbers (415-555-5555), emails (josh@example.com), mentions/handles (@twitter), and hashtags (#exciting)"
hashtag="instagram"
mention="twitter"
/>
);
}
}
从'react native Autolink'导入自动链接；
类MyComponent扩展组件{
render（）{
返回(
);
}
}
请参阅https://github.com/tasti/react-linkify/.
查看源代码。您是说您只需要解析一个文本字符串并拉出字符串中的任何链接吗？您好，纳德，是的，我们希望检测字符串中的任何链接（对帖子的评论）并使用LinkingIOS使其可点击。此解决方案唯一的问题是您正在丢失文本格式-新行、选项卡、，等等：（这里有一个非常有效的方法：手机号码呢？我的文字就像电话：12312321尝试一下react native autolink，如下所示，
链接validateURL链接样式={{color:“blue”}