使用 React Native Render Html 在应用程序中链接答案

【问题标题】：Link Within an App with the React Native Render Html使用 React Native Render Html 在应用程序中链接
【发布时间】：2020-03-07 18:01:59
【问题描述】：

在我的 expo / react 应用程序中，我有一些来自网站的 HTML，这些 HTML 来自我从 api 中提取的。我想使用该 html 中的链接来链接到应用程序中的页面。一些示例 html...

responseHtml = "<p>this is a paragraph <a href="http://example.com/some-page">Some Page</a><p>"

然后我想我会做一些字符串替换，以便 html 最终看起来像这样......

responseHtml = "<p>this is a paragraph <a href="exp://something/Article/some-page">Some Page</a><p>"

然后我会在我的应用程序中呈现内容，如果我做这样的事情，链接就会起作用......

<HTML onLinkPress={(event, href)=>{Linking.openURL(href)}} html="{responseHtml}" />

我似乎找不到正确的 href 值来成功点击应用内的页面。我试过使用完整路径exp://127.0.0.1:19200/Article/some-page，我试过像/Article/some-page这样的相对链接，我试过在app.json中将模式值设置为“myapp”并用myapp://Article/some-page链接到它

【问题讨论】：

标签： android ios reactjs expo react-native-render-html

【解决方案1】：

你试过解析它吗？我会使用react-native-htmlview 库。在那里您可以自定义链接处理程序。因此，您可以打开链接或将其作为道具传递。您的代码可能如下所示：

import React from 'react';
import HTMLView from 'react-native-htmlview';

class App extends React.Component {
  render() {
    const responseHTML = ``;

    return (
      <HTMLView
        value={htmlContent}
        stylesheet={{
         fontWeight: '300',
         color: '#FF3366', // make links coloured pink
        }}
      />
    );
  }
}

如果您想对链接执行任何自定义操作，它可能如下所示：

return (
  <HTMLView
    value={this.props.putyourhtmlhere}
    onLinkPress={(url) => console.log('clicked link: ', url)}
  />
);

希望有帮助

【讨论】：

是否可以从 onclick 中获取值？.. 比如 responseHtml = "
这是一个段落
你可以简单地做 onLinkPress={ (evt, href) => { Linking.openURL(href); }}