我如何启用React Native相机

时间:2018-07-15 06:44:55

标签: react-native

使用此代码,我得到了一个摄像头,如果单击“捕获”按钮,则可以成功完成捕获。如果单击箭头按钮,我手动在左上方添加了后退箭头按钮,我称其为“ displayfun”,如何再次启用相机。你能给我我新来的解决方案吗?我尝试重新渲染没有得到适当解决方案的组件。

enter image description here

import React, {Component} from 'react';
 import {
  Text,
  View,
  Button,
  Alert,
  StyleSheet,
  TextInput,ImageBackground,
  FlatList,
  Image,
   TouchableHighlight
} from 'react-native';

import Camera from 'react-native-camera';
export default class CameraView extends Component{
 constructor(props){
super(props);

 this.state ={

      status:false

    }

 }


static navigationOptions = {

  headerStyle: {
    //backgroundColor: '#095D56',
    display:'none'
},
  headerTitleStyle: {
    color: 'white'
}
};
 takePicture(){

 if(this.state.status == true)
  {
    this.setState({status: false})
  }
  else
  {
    this.setState({status: true})


  }

    const options={}
        this.camera.capture({metadata:options}).then((data)=>alert(data)).catch((error)=>alert(error))

      }

      displayfun(){
        this.render();
      }



render(){

    return(

        <View style={styles.container}>



   <Camera
          ref={(cam) => {
            this.camera = cam
          }}
          style={styles.camera}
          aspect={Camera.constants.Aspect.fill}
          captureTarget={Camera.constants.disk}
          >


<Text style={{position:'absolute',top:0,left:0}} onPress={this.displayfun.bind(this)} >
          {
                                                  // Pass any View or Component inside the curly bracket.
                                                  // Here the ? Question Mark represent the ternary operator.

                                               this.state.status ? <Image source={require('../images/back.png')}/>: null}

</Text>

            <Text
            style={styles.capture}
            onPress={this.takePicture.bind(this)}>
              [CAPTURE_IMAGE]
            </Text>
        </Camera>
</View>

    );



}
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      flexDirection: 'row'
    },
    camera: {
      flex: 1,
      justifyContent: 'flex-end',
      alignItems: 'center'
    },
    capture: {
      flex: 0,
      backgroundColor: 'black',
      borderRadius: 10,
      color: 'red',
      padding: 15,
      margin: 45
    }
  });

0 个答案:

没有答案