Question

我正在开发一个应用程序，按下此按钮时我有一个按钮（TouchableHighlight），需要捕获当前屏幕的screeshot并将文件保存在设备中。

我的代码没有显示错误，但是当我按下按钮（TouchableHighlight）时，我收到消息：

图像保存到文件：///data/user/0/com.appcamerav4/cache/ReactNative-snapshot-image8525057299267209213.jpg 通过远程JS调试 。< / p>

我无法打开此目录，需要将图像保存到设备。

我是反应原生的新手。

请按照下面的代码：

import React, { Component } from 'react';
import { Text, View, Image, StyleSheet, TouchableHighlight, WebView, StatusBar, Button } from 'react-native';
import { captureScreen } 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");
    console.log("Zoom +");
  }
const btnZooMenos = ()=>{
    alert("Zoo Menos");
    console.log("Zoom +");
  }
const capitureScreen = ()=>{
    
    captureScreen({
        format: "jpg",
        quality: 0.8,
        }).then(
        uri => console.log("Image saved to", uri),
        error => console.error("Oops, snapshot failed", error)
        );
}
     
export default class Monitor extends Component {
    
    render() {
        return (  
          
            <View style={ style.viewPrincipal }>

                <StatusBar hidden />

                <View style={ style.viewImagem }  >                
                    <WebView
                        style={style.video}
                        automaticallyAdjustContentInsets={true}
                        scalesPageToFit={true}
                        startInLoadingState={false}
                        contentInset={{top: 0, right: 0, left: 0, bottom: 0}}
                        scrollEnabled={true}
                        source={{uri: 'https://facebook.github.io/react/logo-og.png'}} 
                        onNavigationStateChange = {this.handleNavigationStateChange}
                        />             
                </View>   
                
                <View style={ style.viewRodape }> 
                
                    <View style={style.viewMenu}>
                        <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>
            </View>
      
        
        );
        
    }
}

const style = StyleSheet.create({
    viewPrincipal:{
        flex: 1    
    },
    viewImagem:{        
        flex:10,  
        justifyContent:'center',
        alignItems:'stretch'        
    },
    viewRodape:{   
    flex:1.3   
    },
    viewMenu:{
        flexDirection:'row',
        justifyContent: 'space-between'
    },  
    imgMenu:{
        margin: 0,
        marginBottom:0     
      },   
    video:{
        flex:1
        }
});

Answer 1

确保在XCode中正确链接react-native-view-shot（可能需要手动安装， refer to React Native doc）。

Answer 2

import React, { useRef } from "react"; // import useRef hook on top

const cardRef = useRef(); // Use this hook inside your func. component *important

// Define a function like this
const saveAsImage = async () => {
    try {
      const result = await captureRef(cardRef, {
        result: "tmpfile",
        quality: 1,
        format: "png",
      });
      MediaLibrary.saveToLibraryAsync(result);
    } catch (e) {
      console.log(e);
    }
  };

应用道具，例如parentRef={cardRef}与您的组件，请确保引用名称匹配，在这种情况下为“ cardRef”。

提供任何Button / TouchableOpacity

onPress={() => {saveAsImage();}}

Answer 3

要解决此问题，您必须在真实的移动设备上获得您的App许可并允许相机存储，然后您可以轻松地将ViewShot保存在移动设备上。

在您的App.info中进入“应用许可”
允许相机访问存储空间

捕获视图并保存到设备 - React Native

3 个答案: