如何在react-native中使用按钮单击渲染组件?

时间:2020-09-08 15:13:32

标签: javascript react-native components render react-native-camera

我正在使用带有本机的react-native相机。我想在单击按钮时打开react-native-camera。我怎样才能做到这一点?我有一个takepic函数,我试图在其中渲染一个相机组件。返回时,我有一个按钮,该按钮正在调用takePic函数,该函数中包含一个摄像头组件。我不确定这是否是正确的方法

import React, { useState, Component } from 'react';
import { StyleSheet, Text, TouchableOpacity, View, Button } from 'react-native';
import { RNCamera } from 'react-native-camera';


class UploadDocuments extends Component {

  takePicture = async function(camera) {
    const options = { quality: 0.5, base64: true };
    const data = await camera.takePictureAsync(options);
    console.log(data.uri);

    })
  };

 takePic =() => {
      return(
        <View style={styles.container}>
        <RNCamera
          style={styles.preview}
          type={RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode.on}
          androidCameraPermissionOptions={{
            title: 'Permission to use camera',
            message: 'We need your permission to use your camera',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
          androidRecordAudioPermissionOptions={{
            title: 'Permission to use audio recording',
            message: 'We need your permission to use your audio',
            buttonPositive: 'Ok',
            buttonNegative: 'Cancel',
          }}
        >
          {({ camera, status, recordAudioPermissionStatus }) => {
            if (status !== 'READY') return <PendingView />;
            return (
              <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                <TouchableOpacity onPress={() => this.takePicture(camera)} style={styles.capture}>
                  <Text style={{ fontSize: 14 }}> SNAP </Text>
                </TouchableOpacity>
              </View>
            );
          }}
        </RNCamera>
      </View>
      )
       
  }

  render() {
    return (
      <TouchableOpacity>
        <Button
          onPress={this.takePic}
          title="Learn More"
          color="#841584"
        />
      </TouchableOpacity>
    )
  }

}


export default UploadDocuments

0 个答案:

没有答案