安装

$ yarn add @sishuguojixuefu/react-native-screenshot react-native-screenshot-notifier react-native-screenshot-observer react-native-view-shot

link

$ react-native link react-native-screenshot-notifier react-native-screenshot-observer react-native-view-shot

API

概览

export interface filePropsType {
  id?: string
  fileName?: string
  path: string
}

export interface optionsPropsType {
  width?: number
  height?: number
  format?: 'png' | 'jpg' | 'webm'
  quality?: 0.0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 |0.8 | 0.9| 1.0
  result?: 'tmpfile' | 'base64' | 'data-uri'
}

export interface screenshotPropsType {
  ViewShot: any
  captureScreen: (callback: (file: filePropsType) => void, options?: optionsPropsType) => void
  startListener: (callback: (file: filePropsType) => void) => void
  stopListener: () => void
}

startListener(func)

开始监听系统截屏并添加一个回调接收返回的截屏信息

componentDidMount() {
  startListener(({ uri, path }) => {
    // path: /xxx/yyy
    // uri: file:///xxx/yyy
    this.setState({
      shotImage: file.uri,
    })
  })
}

stopListener()

停止监听系统监听系统截屏

componentWillUnmount() {
  stopListener()
}

captureScreen

捕获当前显示的屏幕并返回图片地址

import { captureScreen } from '@sishuguojixuefu/react-native-screenshot'

captureScreen(
  ({ path, uri }) => {
    // path: /xxx/yyy
    // uri: file:///xxx/yyy
    console.log('screenshotPatah', uri, path)
  },
  {
    format: 'jpg',
    quality: 0.8,
  }
)

致谢

• rhdeck/react-native-screenshot-notifier for android
• WangZiXiao-ChenDu/react-native-screenshot-observer for ios
• gre/react-native-view-shot for captureScreen