Javascript 如何在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',
            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

import React，{useState，Component}来自'React'；
从“react native”导入{样式表、文本、TouchableOpacity、视图、按钮}；
从“react native camera”导入{RNCamera}；
类UploadDocuments扩展组件{
takePicture=异步功能（摄像头）{
const options={quality:0.5，base64:true}；
const data=wait camera.takePictureAsync（选项）；
log（data.uri）；
})
};
takePic=（）=>{
返回(
{（{摄像头，状态，recordAudioPermissionStatus}）=>{
如果（状态！=“准备就绪”）返回；
返回(
this.takePicture（camera）}style={styles.capture}>
断裂
);
}}
)
}
render（）{
返回(
)
}
}
导出默认上载文档