如何使react-native-webview默认渲染Safari阅读器视图？

前提说明 #

仅iOS平台支持Safari阅读器视图，Android无此特性，以下方案仅针对iOS生效。

实现步骤 #

1. 基础JS注入实现
   导入所需模块，通过平台判断注入专属JS代码，触发阅读器模式：

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

const ReaderModeWebView = ({ source }) => {
  // 注入iOS专属JS，触发阅读器模式
  const injectedReaderJS = `
    document.addEventListener('DOMContentLoaded', () => {
      // 检查页面是否支持阅读器模式API
      if (document.body.webkitEnterReaderMode) {
        document.body.webkitEnterReaderMode();
      }
    });
  `;

  return (
    <WebView
      source={source}
      injectedJavaScript={Platform.OS === 'ios' ? injectedReaderJS : ''}
      useWebKit={true} // iOS默认启用，确保基于WKWebView实现
      javaScriptEnabled={true}
    />
  );
};

export default ReaderModeWebView;

2. 兼容性降级处理
   并非所有页面都支持阅读器模式，可添加状态反馈逻辑处理降级：

// 修改WebView组件，添加消息监听
<WebView
  // ...原有属性
  onMessage={(event) => {
    if (Platform.OS === 'ios') {
      const msg = event.nativeEvent.data;
      if (msg === 'readerModeUnsupported') {
        console.log('当前页面无法启用阅读器视图');
        // 此处可添加降级UI逻辑
      }
    }
  }}
/>

同时更新注入的JS代码，增加不支持时的反馈：

const injectedReaderJS = `
  document.addEventListener('DOMContentLoaded', () => {
    if (document.body.webkitEnterReaderMode) {
      document.body.webkitEnterReaderMode();
    } else {
      window.ReactNativeWebView.postMessage('readerModeUnsupported');
    }
  });
`;

3. 原生层增强（可选）
   若JS注入方式不稳定，可通过自定义原生模块直接操作WKWebView：

• iOS原生OC代码示例（需iOS 11+）：

if (@available(iOS 11.0, *)) {
    [self.webView enterReaderModeAnimated:YES completionHandler:^(BOOL success) {
        if (!success) {
            // 进入失败时的回调逻辑
        }
    }];
}

• 通过React Native桥接，在JS层调用该原生方法即可。

注意事项 #

• 优先使用公开的webkitEnterReaderMode JS API，避免使用私有API导致App Store审核问题。
• 动态内容、文本占比过低的页面无法触发阅读器模式，需提前做好兼容处理。

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