2017-01-28 13 views
4

私の目標は、反応したネイティブカメラを使用して、写真が撮られた場合に同じ画面に画像を表示することです。私は "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> 
    

答えて

7

私は自分の質問への答えを見つけました。これは、使用されている反応ネイティブカメラの例です。
https://github.com/spencercarli/react-native-snapchat-clone/blob/master/app/routes/Camera.js

この回答は、@vayayrが回答した別の以前の質問にあります。ありがとう! 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; 
関連する問題