Как реагировать на встроенную камеру, как получить доступ к сохраненным изображениям?

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. Спасибо! Получите недавно нажатое изображение с камеры при просмотре изображения в реагирующем

Вот код из первой ссылки:

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;