使用 react-native-camera，如何访问保存的图片？

Posted 2023-03-11

技术标签:

【中文标题】使用 react-native-camera，如何访问保存的图片？【英文标题】：Using react-native-camera, how to access saved pictures? 【发布时间】：2017-01-28 23:17:05 【问题描述】：

我的目标是使用 react-native-camera 并简单地在同一屏幕上显示图片（如果已拍摄照片）。我正在尝试将图片源保存为“imageURI”。如果它存在，我想显示它，如果还没有拍照，只显示文本说No Image Yet。我已经让相机工作了，因为我可以跟踪应用程序正在将图片保存到磁盘。遇到以下问题：

如何在我拍照时将捕获函数数据分配给一个变量，以便我稍后调用 (imageURI)。

不知道如何在 javascript 中使用 if 语句来检查变量是否存在。

import Camera from 'react-native-camera';

export default class camerahere extends Component 

_takePicture () 
  this.camera.capture((err, data) => 
  if (err) return;
  imageURI = data;
  );


render() 

  if ( typeof imageURI == undefined) 
    image = <Text> No Image Yet </Text> 
   else 
    image = <Image source=uri: imageURI, isStatic:true 
    style=width: 100, height: 100 />
  


return (
  <View style=styles.container>
    <Camera
      captureTarget=Camera.constants.CaptureTarget.disk
      ref=(cam) => 
        this.camera = cam;
      
      style=styles.preview
      aspect=Camera.constants.Aspect.fill>

      button
    <TouchableHighlight onPress=this._takePicture.bind(this)>
      <View style=height:50,width:50,backgroundColor:"pink"></View>
</TouchableHighlight>
</Camera>

【问题讨论】：

【参考方案1】：

我找到了自己问题的答案。这是使用 react-native-camera 的示例。https://github.com/spencercarli/react-native-snapchat-clone/blob/master/app/routes/Camera.js

在@vinayr 回答的另一个较早发布的问题中找到了这个答案。谢谢！ Get recently clicked image from camera on image view in react-native

这是第一个链接的代码：

import React,  Component  from 'react';
import 
  View,
  StyleSheet,
  Dimensions,
  TouchableHighlight,
  Image,
  Text,
 from 'react-native';
import Camera from 'react-native-camera';

const styles = StyleSheet.create(
  container: 
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#000',
  ,
  preview: 
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    height: Dimensions.get('window').height,
    width: Dimensions.get('window').width
  ,
  capture: 
    width: 70,
    height: 70,
    borderRadius: 35,
    borderWidth: 5,
    borderColor: '#FFF',
    marginBottom: 15,
  ,
  cancel: 
    position: 'absolute',
    right: 20,
    top: 20,
    backgroundColor: 'transparent',
    color: '#FFF',
    fontWeight: '600',
    fontSize: 17,
  
);

class CameraRoute extends Component 
  constructor(props) 
    super(props);

    this.state = 
      path: null,
    ;
  

  takePicture() 
    this.camera.capture()
      .then((data) => 
        console.log(data);
        this.setState( path: data.path )
      )
      .catch(err => console.error(err));
  

  renderCamera() 
    return (
      <Camera
        ref=(cam) => 
          this.camera = cam;
        
        style=styles.preview
        aspect=Camera.constants.Aspect.fill
        captureTarget=Camera.constants.CaptureTarget.disk
      >
        <TouchableHighlight
          style=styles.capture
          onPress=this.takePicture.bind(this)
          underlayColor="rgba(255, 255, 255, 0.5)"
        >
          <View />
        </TouchableHighlight>
      </Camera>
    );
  

  renderImage() 
    return (
      <View>
        <Image
          source= uri: this.state.path 
          style=styles.preview
        />
        <Text
          style=styles.cancel
          onPress=() => this.setState( path: null )
        >Cancel
        </Text>
      </View>
    );
  

  render() 
    return (
      <View style=styles.container>
        this.state.path ? this.renderImage() : this.renderCamera()
      </View>
    );
  
;

export default CameraRoute;

【讨论】：