Expo / React Native：允许用户在 iOS 上截取整个页面的屏幕截图

Question

我目前无法理解如何允许用户在 iOS 上截取整个页面的屏幕截图 - 因为在某些应用程序（Safari，..）中可以截取这样的屏幕截图，而且我认为这可能是一个功能仅适用于苹果本身，但现在我看到chatgpt应用程序也允许这样做

所以我所说的行为是在制作屏幕截图后 - 用户可以打开屏幕截图并在“屏幕”和“全页”之间有一个小导航，例如在这里可以看到：https:// www.cultofmac.com/wp-content/uploads/2024/01/Screenshot-Full-Page.jpg

Answer 1

• 您可以让用户在像您这样的 React Native 应用程序中截取整个屏幕的屏幕截图。然而，捕获完整的网页并不是 iOS 的原生功能。

• 您需要实施定制的解决方案。

• 使用 ScrollView 或 FlatList 渲染可能长于屏幕高度的内容。

  import { captureRef } from 'react-native-view-shot';
  import { ScrollView } from 'react-native';
  
  // Capture full page
  const captureFullPage = async () => {
  try {
    let fullPageImageUri = '';
  
    // Assuming `scrollRef` is a ref to the scrollable container
    const localUri = await captureRef(scrollRef, {
      format: 'jpg', 
      quality: 1,
      result: 'tmpfile', // Save as temporary file
    });
  
    fullPageImageUri = localUri;
  
     // Options save to gallery
     await MediaLibrary.saveToLibraryAsync(fullPageImageUri);
      alert('Full Page Screenshot Saved!');
    }  catch (e) {
      console.error("Error capturing full page", e);
    }
  };
  
  return (
    <ScrollView ref={scrollRef} style={styles.scrollView}>
      {/* Your page content here */}
    </ScrollView>
  );
  

• 我最近阅读了Expo提供的文档，其中有一个源代码向我们展示了屏幕截图功能的实际工作原理：https://docs.expo.dev/tutorial/screenshot/