Question

我找不到任何解释此功能的文档。

我想知道如何以编程方式拍摄屏幕截图并将其保存到图库中。

我尝试了react-native-view-show画廊，但是没有用。

任何帮助将不胜感激

当前代码：

import React, { Component } from "react";
import { View, Text, Button, Image, ScrollView, StatusBar } from "react-native";
import { captureScreen } from "react-native-view-shot";
import CameraRollExtended from "react-native-store-photos-album";

export default class App extends Component {
  componentDidMount() {
    StatusBar.setHidden(true, "none");
  }

  render() {
    return (
      <View>
        <Button
          title="Click"
          onPress={() => {
            captureScreen({
              format: "jpg",
              quality: 0.8
            }).then(
              uri => {
                CameraRollExtended.saveToCameraRoll(
                  {
                    uri: uri,
                    album: "Name"
                  },
                  "photo"
                );
              },
              error => console.error("Oops, snapshot failed", error)
            );
          }}
        />
      </View>
    );
  }
}

Answer 1

使用<configuration> <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="https://XYZ.azurewebsites.net/api/users/userlogin" /> <add name="Access-Control-Allow-Methods" value="*" /> <add name="Access-Control-Allow-Headers" value="accept, content-type, x-my-custom-header" /> <add name="Access-Control-Allow-Credentials" value="true" /> </customHeaders> </httpProtocol>可以正常工作，请尝试

CamerarRoll

有关如何为两个平台设置import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, Button, Platform } from 'react-native'; import CameraRoll from "@react-native-community/cameraroll"; import { captureScreen } from "react-native-view-shot"; export default class App extends Component { constructor(){ super(); this.state={ imageURI : 'https://reactnativecode.com/wp-content/uploads/2018/02/motorcycle.jpg' } } captureScreenFunction=()=>{ captureScreen({ format: "jpg", quality: 0.8 }) .then( uri => this.setState({ imageURI : uri }), error => console.error("Oops, Something Went Wrong", error) ); } ScreenFunction=()=>{ console.log(this.state.imageURI) CameraRoll.saveToCameraRoll(this.state.imageURI,'photo') } render() { return ( <View style={styles.MainContainer}> <Button title="Capture Device Screenshot" onPress={this.captureScreenFunction} /> <Button title="Save Device Screenshot" onPress={this.ScreenFunction} /> <Image source={{uri : this.state.imageURI}} style={{width: 200, height: 300, resizeMode: 'contain', marginTop: 5}} /> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', borderWidth: 1, borderColor: '#000', marginTop: (Platform.OS) === 'ios' ? 20 : 0, } });的详细信息

https://github.com/react-native-community/react-native-cameraroll

React Native：如何以编程方式获取ScreenShot并将其保存到图库

1 个答案: