为React Native移动应用创建站点地图并识别WebView页面

Flipper 到底能不能用？怎么用？ #

Flipper完全支持生成应用的页面导航结构，还能区分WebView和纯RN页面，步骤如下：

• 如果你用的是RN 0.62及以上版本，Flipper已经默认集成，低版本需要手动安装依赖。
• 打开Flipper客户端，在插件市场搜React Navigation Inspector并安装（前提是你的项目用React Navigation做路由），这个插件会自动抓取你的路由栈结构，实时展示页面层级。
• 要区分WebView页面的话，你可以在路由的screenOptions里加个自定义标识，比如isWebView: true，之后在Flipper的插件面板里就能通过这个标识筛选，一眼区分出WebView页面。部分插件还支持导出JSON格式的结构，方便后续转成可视化地图。

其他好用的工具推荐 #

1. 自定义脚本生成（灵活可控） #

你可以自己写个小脚本遍历路由配置，判断每个页面是否用了WebView，生成带类型标记的站点地图。比如针对React Navigation的路由配置，示例代码大概是这样：

function generateSitemap(routes, parentPath = '') {
  const sitemap = [];
  routes.forEach(route => {
    const fullPath = parentPath ? `${parentPath}/${route.name}` : route.name;
    // 简单判断组件是否包含WebView，可根据你的实际组件结构调整
    const isWebView = route.component.toString().includes('WebView');
    sitemap.push({
      path: fullPath,
      type: isWebView ? 'WebView页面' : '纯RN组件页面'
    });
    // 递归处理子路由
    if (route.children) {
      sitemap.push(...generateSitemap(route.children, fullPath));
    }
  });
  // 可以把结果写入文件，比如转成Markdown或JSON
  console.log(JSON.stringify(sitemap, null, 2));
}

// 传入你的路由配置数组
generateSitemap(yourNavigationRoutes);

运行这个脚本就能得到带类型标记的站点结构，完全自定义，适配你的项目结构。

2. react-navigation-visualizer（可视化路由） #

这个工具能直接在应用内生成可视化的路由图，你可以修改它的源码或者加个小扩展，给WebView页面的节点标上不同颜色或者标签，一眼就能区分页面类型。使用时只需要在项目中导入这个组件，运行应用就能看到可视化的站点地图。

3. 自定义Eslint规则（批量识别） #

如果项目很大，页面很多，可以写个自定义Eslint规则，扫描所有页面组件文件，自动识别包含WebView的文件，然后结合路由信息生成站点地图。这个方式适合大型项目，能自动批量标记，不用手动一个个改。

手动应急方案 #

如果以上工具都不符合你的需求，最简单的方式就是在路由配置里给每个页面加个pageType字段，比如pageType: 'rn'或者pageType: 'webview'，然后写个简单脚本遍历路由，导出成Markdown格式的站点地图，比如：

# 应用站点地图
- 首页（纯RN组件页面）
  - 个人中心（纯RN组件页面）
  - 帮助中心（WebView页面）
  - 关于我们（WebView页面）

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