我如何使用 React Native 中的按钮截取相机屏幕的屏幕截图?

2023-12-23

我在我的应用程序上使用反应本机相机和覆盖图像。现在我想使用按钮截取该屏幕的屏幕截图。但是当我截取屏幕截图时,图像上仅显示叠加图像。我需要用相机视图捕获屏幕以及叠加图像。

return (
      <Camera
        ref={(cam) => {
          this.camera = cam;
        }}
        style={styles.preview}
        aspect={Camera.constants.Aspect.fill}
        captureTarget={Camera.constants.CaptureTarget.disk}
      >
      	<Image
              style={{width: 400, height: 400}}
              source={require('./image/shilpamela.png')}
            />
        <TouchableHighlight
          style={styles.capture}
          //onPress={this.takePicture.bind(this)}
          onPress={
            () => {
              captureScreen({
                format: "jpg",
                quality: 0.8
              })
              .then(
                uri => {
                  CameraRollExtended.saveToCameraRoll({
                    uri: uri,
                    album: 'Name'
                  }, 'photo')
                },
                error => console.error("Oops, snapshot failed", error)
              );
            }
          }
          underlayColor="rgba(255, 255, 255, 0.5)"
        >
          <View>
            <Image
              style={{width: 60, height: 60}}
              source={require('./image/cam_button.png')}
            />
          </View>
        </TouchableHighlight>
      </Camera>
    );

None

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

我如何使用 React Native 中的按钮截取相机屏幕的屏幕截图? 的相关文章

  • 我的 rtk 切片的初始状态未按预期保存在存储中?

    目前正在学习如何将 RTK 与 typescript 结合使用 我有 2 个切片 其中一个是我使用 RTK 查询制作的以获取数据 称为apiSlice ts 另一个使用 createSlice 来处理我的待办事项应用程序的同步状态更改 称为
  • 从字符串渲染 React 组件

    我在字符串中有一些 React 代码 例如 const component function App return div test div 我希望能够从浏览器内渲染该组件 例如 import React Component from re
  • Marshmallow 中的手电筒控制

    我对最新 Marshmallow 版本中的相机 更具体地说是手电筒 有疑问 在任何棉花糖之前的版本上 我需要执行以下操作来打开 关闭闪光灯 private void turnFlashOn final Camera camera int f
  • useState 由于某种原因没有更新?

    当我尝试使用 axios 从后端 API 获取一些数据 并在由于某种原因获得结果后设置状态时 状态不会更新 当我尝试使用状态时 它只会向我显示一个空数组 但有趣的是当我console log res data 它会毫无问题地向我显示我的列表
  • 使用 Typings 安装 React 相关类型定义时出现问题

    每当我尝试安装任何与 React 相关的包类型定义时 例如react boostrap fixed data table or react router尝试构建时出现以下类型的错误tsc Typings globals react boot
  • React Native 循环这个

    当我把onPress在地图循环中 它不起作用 如何修复它 var PageOne React createClass handlePress this props navigator push id 2 render return
  • React router v4 嵌套路由相对路径

    我有一个带有 React Router v4 的组件到另一个组件 我想在第二个组件中添加另一个路由 这是主要路线 const Dashboard gt return div div
  • 如何删除默认的故事书画布样式?

    Storybook 将默认样式应用于故事画布 iframe 这使得我的故事无法呈现应有的样子 如何摆脱 Storybook 的默认样式 例如 这是默认样式h2元素 通过 Storybook 的 page css 那个的来源page css
  • React Native + Jest EMFILE:打开文件太多错误

    我正在尝试运行 Jest 测试 但收到以下错误 读取文件时出错 Users mike dev react TestTest node modules react native node modules yeoman environment
  • 对大数据块进行反应非阻塞渲染

    最近我开始学习反应并想知道是否有某种模式可以用于大数据的非阻塞 UI 线程渲染 比方说 我们采取这个例子 https www mendix com tech blog making react reactive pursuit high p
  • 所有人共享的 First Load JS 在 next.js 中相当重

    I have a project on Next js framework and the problem is that First Load JS shared by all pages is rather heavy I want t
  • ElectronJS 捕获屏幕质量低

    我正在使用 ElectronJS 测试屏幕捕获 我可以捕获屏幕 但捕获的视频质量低于原始视频 操作系统 Linux Mint 20 电子版本 11 1 0 这是我的代码 我选择我的屏幕 然后使用以下命令在电子应用程序中显示捕获的屏幕vide
  • 将react-query 测试与testing-library 集成

    Aim 我正在构建一个使用 React query 来获取数据的 NextJS 应用程序 我现在正在尝试实现一个测试框架 然而 当我跑步时yarn test我收到以下错误 从反应查询文档中 我了解到该错误通常与以下情况有关
  • 屏幕截图忽略了一些窗口

    我正在 MFC 中工作 我正在尝试捕获桌面的 bmp 我正在使用 GetDC NULL 来执行此操作 但它似乎忽略了特殊的皮肤窗口 它似乎忽略了用 UpdateLayeredWindow 绘制的窗口 此行为似乎仅发生在 Vista x64
  • React:未终止的 JSX 内容

    为什么我会收到错误消息Unterminated JSX contents为闭幕式div 元素 我究竟做错了什么 export default class Search extends Component render return div
  • 在react-highcharts中动态更改系列数据,无需重新渲染图表

    I have created a line chart using react highcharts It has 3 series and different data for each of them And I have a rang
  • 在react.js中调用API渲染数组图片

    我有 API 其中包括 pictures http storage web source images 2016 10 28 edac054f88fd16aee7bc144545fea4b2 jpg http storage web sou
  • 在 React 中更新状态时递归过多

    在此示例中 当我尝试在componentDidUpdate生命周期回调 我得到too much recursion错误 我应该如何更新状态 import React from react class NotesContainer exten
  • 是否可以用 json 进行表达式/计算?

    我使用出色的 json server 作为应用程序的后端 它对于访问自定义端点以检索一些数据非常有用 但是如果它允许我进行计算 表达式以便我也可以模仿后端行为 那将会非常有用 以这个数据结构为例 products name football
  • 如何将 setTimeout 添加到使用 redux 的 fetch Promise 中?

    经过一定的秒数后 如果获取承诺尚未得到解决 我想向用户显示超时错误 我在这里看到了一些添加 setTimeout 来获取的很好的例子 https github com github fetch issues 175 https github

随机推荐