Mit react native-Kamera, wie der Zugriff auf gespeicherte Bilder?

Mein Ziel ist, das reagieren-native-Kamera und zeigen einfach ein Bild auf dem gleichen Bildschirm, wenn ein Bild gemacht wurde. Ich werde versuchen, speichern Sie das Bild als Quelle "imageURI". Wenn es vorhanden ist, möchte ich es zeigen, wenn ein Bild nicht genommen worden, doch nur text anzeigen, Nein zu sagen Bild Noch. Ich habe die Kamera arbeiten, da kann ich nachvollziehen, die app ist das speichern der Bilder auf die Festplatte. Probleme mit dem folgenden:

  • Wie ordnen Sie die capture-Funktionen, Daten auf eine variable, wenn ich das Bild, dass ich anrufen kann später (imageURI).

  • Nicht wissen, wie Sie eine if-Anweisung in Javascript überprüfen, ob eine variable existiert noch nicht.

    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>

InformationsquelleAutor Arsalan S. | 2017-01-28
  1. 11

    Fand ich die Antwort auf meine eigene Frage. Dies ist ein Beispiel für die Reaktion-native-Kamera verwendet wird.

    https://github.com/spencercarli/react-native-snapchat-clone/blob/master/app/routes/Camera.js

    Fand diese Antwort in einem anderen zuvor gepostete Frage beantwortet @vinayr. Danke!
    Holen Sie sich kürzlich angeklickte Bild von der Kamera auf das Bild, Blick in reagieren-native

    Hier ist der code aus dem ersten link:

    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;
    • vielen Dank für den Austausch, schön und funktionieren 🙂
    • Hallo, ich denke, diese Antwort wurde obsolet. Hast du ein update ?
    InformationsquelleAutor Arsalan S.
Schreibe einen Kommentar