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

我的目标是使用react-native-camera,如果已拍摄照片,只需在同一屏幕上显示图片.我正在尝试将图片源保存为“imageURI”.如果它存在,我想展示它,如果还没有拍摄照片,只显示没有图像的文字.我有相机工作,因为我可以跟踪应用程序将图片保存到磁盘.遇到以下问题：

>当我拍照时,如何将捕获函数数据分配给变量,我可以稍后调用(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>

我找到了自己问题的答案.这是使用的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',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,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;

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

猜你在找的React相关文章