react-native - 捕获 Ref 或自定义从 JSX/HTML 生成图像 react native 而不向用户显示 UI

Question

我想实现下载收据功能。我很想使用 capture Ref，因为我想生成用户可以下载的收据图像。要在 React Native/Expo 中从 JSX 或 HTML 生成图像，我使用 capture Ref。我只能通过 View 渲染来做到这一点，因为这个功能需要一个 React 组件。

https://docs.expo.dev/versions/latest/sdk/captureRef/

但如果不向用户显示 UI，我就无法执行此操作。我想要做的是，留在页面上，单击下载按钮，下载我可以自定义创建的图像，而不是将其显示给用户。但是，我无法完全找到一种方法来仅从 JSX 创建图像，其中包含我想要接收的内容而不显示给用户。基本上，我希望整个过程在后台发生并成功下载。

Answer 1

您可以使用绝对定位将内容设置为远离屏幕:

      <View style={{position: 'absolute', left: Dimensions.get('screen').width}}>
        <ViewShot
          onCapture={onCapture}
          width={width}
          height={height}
        >
          <Text>This will show on the image</Text>
        </ViewShot>
      </View>

该库还提供了 offscreen rendering 的示例