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

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

我正在使用带有本机的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',}}
        >
          {({ 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