如何使用TouchableHighlight拍摄屏幕截图（View）？

Question

错误已根据您的指南解决。

但是仍然无法拍摄并保存所需的ViewShot的screeshot，它有一个反应图像。

我需要将screeshot保存在我设备的内存中。

你能告诉我，如果我走在正确的轨道上，还是我还有其他方法可以做到这一点？谢谢！

按照我当前的代码。

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

const zooMais = require('../imgs/zooMais.png');
const zooMenos = require('../imgs/zooMenos.png');
const imgScreeshot = require('../imgs/screeshot.png');

const btnZooMais = ()=>{
    alert("Zoo Mais");
  }
const btnZooMenos = ()=>{
    alert("Zoo Menos");
  }
const capitureScreen = ()=>{
        captureScreen({
        format: "jpg",
        quality: 0.9,
        }).then(
            uri => console.log("Image saved to", uri),
            error => console.error("Oops, snapshot failed", error)
            );
}

        
export default class Monitor extends Component {
    
    componentDidMount () {
        this.refs.viewShot.capture().then(uri => {
          console.log("do something with ", uri);
        });
      }
  
    render() {
        return (
           
            <View>
         <ViewShot ref="viewShot" options={{ format: "jpg", quality: 0.9 }} >                 
   <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}} style={ style.video } />                  
        </ViewShot>
                
                <View style={style.menu}>
                    <View>
                        <TouchableHighlight onPress={  btnZooMais } >
                            <Image style={style.imgMenu} source={zooMais } />
                        </TouchableHighlight>
                    </View>  

                    <View>
                    <TouchableHighlight onPress={ capitureScreen }>
                      <Image style={style.imgMenu} source={ imgScreeshot } />
                    </TouchableHighlight >
                    </View>

                    <View>
                        <TouchableHighlight onPress={ btnZooMenos } >
                         <Image style={style.imgMenu} source={ zooMenos } />
                        </TouchableHighlight>
                    </View>
                </View>
            </View>
        );
    }
}

const style = StyleSheet.create({
    corpo: {
    },
    menu:{
        flexDirection:'row',
        justifyContent: 'space-between'
    },
    imgMenu:{
        //margin: 15
      },
      video: {
          width: 400, 
          height: 450
        }
});

Answer 1

看起来你可能没有链接包或链接后重建应用程序。

尝试

 $ react-native link react-native-view-shot
 $ react-native run-{ios|android}