Question

我正在使用React native构建适用于iOS的应用程序，我想知道如何拍摄给定屏幕的快照。我找到了这个library，但我不知道如何使用它。有人知道怎么做吗？

编辑：我使用以下代码使用该库捕获屏幕，但出现了给定的错误。

try {
        captureRef(viewRef, {
        format: "jpg",
        quality: 0.8
        })
        .then(
        uri => console.log("Image saved to", uri),
        error => console.error("Oops, snapshot failed", error)
        );
    } catch (e) {
        console.log(e);
    }

错误

ReferenceError: viewRef is not defined

有人知道如何解决该错误吗？谢谢

Answer 1

可以，但是您必须阅读一下ref是什么。如果您已经在使用React挂钩，请检查以下内容：https://es.reactjs.org/docs/hooks-reference.html#useref

（如果不是，只需搜索如何在带有createRef的React中创建引用）

基本上， ref 可以让您使用相同的变量来标识组件，即使组件重新渲染也是如此。因此，示例中的viewRef应该是对给定元素的引用。喜欢：

import React, { useRef } from "react";

function MyComponent() {
  const viewRef = useRef();

  return <View ref={viewRef}>content</View>
}

因此，您的草稿可能类似于：

    import React, { useRef } from "react";
    import {Button, View, Text} from 'react-native';
    import { captureRef } from "react-native-view-shot";

    function useCapture() {
      const captureViewRef = useRef();

      function onCapture() {
        captureRef(captureViewRef, {
          format: "jpg",
          quality: 0.9
        }).then(
          uri => alert(uri), 
          error => alert("Oops, snapshot failed", error));
      }

      return {
        captureViewRef,
        onCapture
      };
    }

    function MyComponent() {
      const { captureViewRef, onCapture } = useCapture();

      return (
        <>
          <View ref={captureViewRef}><Text>content</Text></View>
          <Button title="Save" onPress={onCapture} />
        </>
      );
    }

据我所知，这只会生成一个临时文件。如果您想将捕获的内容保存到设备中，则应使用CameraRoll https://facebook.github.io/react-native/docs/cameraroll

我不会在这里介绍如何使用它，但是它类似于：

CameraRoll.saveToCameraRoll(uri); // uri 是您从captureRef方法获得的路径

请注意，您的应用必须先寻求适当的许可，然后再尝试保存到设备库中。

Answer 2

嗨，这可以借助react-native-view-shot

这是我的父组件

                import React, {Component,useRef} from 'react';
                import {Platform, StyleSheet, Text, View,Image,Button} from 'react-native';
                import { captureRef, captureScreen ,ViewShot} from "react-native-view-shot";
                import NewVd from './NewVd';
                import Newved from './Newved';

                export default class App extends Component {
                constructor(){
                super();
                this.state={
                    item:null,
                    captureProcessisReady:false,
                    myView:false
                };
                this.func=this.func.bind(this);
                }
                componentDidMount(){

                }
                    result1=()=>{
                                    console.log("i am here ");
                                    this.setState({captureProcessisReady:true});
                                }

                    func = (uri) => {
                                        console.log('ADD item quantity with id: ', uri);
                                        this.setState({item:uri,myView:true});
                                    };

                render() {
                    return (
                    <View style={styles.container}>
                        {/* <NewVd  
                        func={this.func}/> */}
                        <Newved />
                        <Text>...Something to rasterize...</Text>
                        <Text style={styles.welcome}>Welcome to React Native!</Text>
                        <Text style={styles.instructions}>To get started, edit App.js</Text>
                            <Button onPress={()=>this.result1()} title="press Me"/>
                                <View>
                                {this.state.captureProcessisReady?( <NewVd func={this.func}/>):null}
                                </View>
                                <View>
                                {this.state.myView?( <Image source={{uri:this.state.item !== null?`${this.state.item}`:'https://picsum.photos/200'}} style={{width:100,height:100}} />):null}
                                </View>
                    </View>
                    );
                }
                }

                const styles = StyleSheet.create({
                container: {
                    flex: 1,
                    justifyContent: 'center',
                    alignItems: 'center',
                    backgroundColor: '#F5FCFF',
                },
                welcome: {
                    fontSize: 20,
                    textAlign: 'center',
                    margin: 10,
                },
                instructions: {
                    textAlign: 'center',
                    color: '#333333',
                    marginBottom: 5,
                },
                });

这是我的孩子组成部分

       import React, {Component} from 'react';
    import {Platform, StyleSheet, Text, View} from 'react-native';
    import ViewShot from "react-native-view-shot";


            class NewVd extends Component {
                constructor(props){
                    super(props);
                    }

                  onCapture = uri => {
                          console.log("do something with ", uri);
                          this.props.func(uri);                   //for the parent using callback
                        }


                  render() {
                            return (
                              <ViewShot onCapture={this.onCapture} captureMode="mount">
                                <Text>...Something to rasterize...</Text>
                              </ViewShot>
                            );
                          }
                        }

                  export default NewVd;

反应本机快照屏幕

2 个答案: