react-native-camera-example/Example.js at master · ifatihyildirim/react-native-camera-example · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight,
  Image,
} from 'react-native';
import Camera from 'react-native-camera';

export default class camerahere extends Component {
  constructor(props) {
    super(props);

    this.camera = null;

    this.state = {
      lastCapture: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuY7W8W3EfSgrsrmlmnAE3cvRYrP4N7u4wbC6YlCQhgqCBY7Y",
    };
  }

  clickedme() {

    this.camera.capture()
    .then((data) => {
      alert("Resim Url: " + data.mediaUri);
      this.setState({ lastCapture: data.mediaUri });
      console.log(data);
    })
    .catch(err => console.error(err));
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.img}>
          <Image
            style={{
              alignSelf: 'center',
              height: 150,
              width: 150,
              borderWidth: 1,
              borderRadius: 75
            }}
            source={{uri: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTuY7W8W3EfSgrsrmlmnAE3cvRYrP4N7u4wbC6YlCQhgqCBY7Y"}}
            resizeMode="stretch"
          />
          <Text>{this.state.lastCapture}</Text>
          </View>
        <View style={styles.img}>
          <Camera
          ref={(cam) => {
            this.camera = cam;
          }}
          style={styles.preview}
          aspect={Camera.constants.Aspect.fill}
          >
            <TouchableHighlight onPress={this.clickedme.bind(this)} >
              <View style={{height:50,width:50,backgroundColor:'pink',}}></View>
            </TouchableHighlight>
          </Camera>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  img: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  preview: {
    flex: 1,
    alignSelf: 'stretch',
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
});

AppRegistry.registerComponent('camerahere', () => camerahere);