Использование интерактивной камеры, как получить доступ к сохраненным снимкам?

Question

Моя цель состоит в том, чтобы использовать камеру с накаткой и просто показать картинку на том же экране, если фотография была сделана. Я пытаюсь сохранить источник изображения как «imageURI». Если он существует, я хочу показать его, если фотография еще не была сделана, просто покажите текст, в котором говорится «Нет изображения». У меня работает камера, так как я могу отслеживать приложение, это сохранение изображений на диск. У вас возникли проблемы со следующим:

• Как назначить данные функции захвата переменной при съемке, которую я могу вызвать позже (imageURI).

• Не знаю, как сделать оператор if в Javascript, чтобы проверить, существует ли переменная.

  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> 
  

Answer 1

Я нашел ответ на свой вопрос. Это пример используемой камеры, использующей реакцию.
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;