如何从我的 React 本机应用程序中打开相机

Question

我正在开发一个应用程序，我们希望允许用户（技术支持人员）拍摄员工徽章的照片，以便我们可以分析照片并提取徽章 ID（我们已经有一个开源算法来做到这一点）来创建票证。我让该应用程序运行帮助台人员从桌面上使用的应用程序的 Web 视图，以及顶部用于打开相机的按钮（目前只是一个警报）。代码如下：

const onPress = () => {
  Alert.alert('Will capture the badge using the camera');
 };
export default class App extends React.Component {
render() {
return (
  <View style={styles.container}>
  <Button
    onPress={onPress}
    title="Capture Badge"
    color="#841584"
    accessibilityLabel="Capture a Customer's ID via a picture of their badge"
  />
    <WebView
         source={{uri: "www.example.com"}}
     />
    </View>
);
}

基本上，我需要在onPress中放什么，以便我可以拍照然后将其发送到我们的算法（该算法将只是onPress结束时的函数调用）？我已经对在 react native 中使用相机进行了研究，但一切都在考虑在视图中渲染相机。我只想在用户点击应用程序顶部的"捕获徽章"按钮时打开相机视图。

Answer 1

您可以使用 react-native-image-cropper-picker。如果我理解正确，您希望能够启动相机，然后作为承诺，将图像发送到您的对象检测算法。使用此库，您可以按如下方式启动相机：

openCamera(){
    ImagePicker.openCamera({
      width: 300,
      height: 400,
      cropping: true
    }).then(image => {
      //Your image
      console.log(image);
    });
}