如何在React Native项目中集成Disqus？

方案一：使用WebView嵌入官方Disqus评论组件 #

这是最直接且稳定的方式，Disqus本身提供网页端嵌入代码，通过React Native的WebView即可直接复用：

1. 先安装react-native-webview（未安装的话）：

npm install react-native-webview
# 或用yarn
yarn add react-native-webview

2. 编写组件代码：

import React from 'react';
import { WebView } from 'react-native-webview';

const DisqusComments = ({ forumShortname, articleId, articleTitle }) => {
  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script id="dsq-count-scr" src="//${forumShortname}.disqus.com/count.js" async></script>
    </head>
    <body>
      <div id="disqus_thread"></div>
      <script>
        var disqus_config = function () {
          this.page.url = 'https://your-domain.com/articles/${articleId}'; // 替换为你的文章公开访问URL
          this.page.identifier = 'article-${articleId}'; // 文章唯一标识
          this.page.title = '${articleTitle}'; // 文章标题
        };
        (function() {
          var d = document, s = d.createElement('script');
          s.src = '//${forumShortname}.disqus.com/embed.js';
          s.setAttribute('data-timestamp', +new Date());
          (d.head || d.body).appendChild(s);
        })();
      </script>
    </body>
    </html>
  `;

  return (
    <WebView
      source={{ html: htmlContent }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      style={{ flex: 1 }}
    />
  );
};

export default DisqusComments;

3. 使用组件时传入对应参数：

<DisqusComments
  forumShortname="your-forum-shortname"
  articleId="123"
  articleTitle="My Awesome Article"
/>

注意：Disqus要求page.url必须是公开可访问的真实URL，否则评论可能无法正常加载或同步。

方案二：调用Disqus API自定义评论组件 #

如果需要深度定制UI，可以直接调用Disqus REST API处理评论的获取、提交等逻辑：

1. 先在Disqus开发者平台创建应用，获取API密钥和论坛信息。
2. 示例：获取评论列表

import axios from 'axios';

const fetchComments = async (forumShortname, articleId) => {
  const response = await axios.get('https://disqus.com/api/3.0/threads/listPosts.json', {
    params: {
      api_key: 'YOUR_DISQUS_API_KEY',
      forum: forumShortname,
      thread: `ident:article-${articleId}`,
      limit: 20,
    },
  });
  return response.data.response;
};

这种方式需要自行实现评论渲染、提交、点赞等交互逻辑，适合对UI有特殊需求的场景，但开发成本更高。

关于react-native-disqus包的说明 #

该包长期未更新，和新版本React Native存在兼容性问题（如架构变更、依赖库过时），不建议继续使用，优先选择上述两种方案。

内容的提问来源于stack exchange，提问作者Shilajit Dutta