时间戳

首页 > 解决方案 > 如何从我的 React Native 应用程序中打开相机？

react-native - 如何从我的 React Native 应用程序中打开相机？

问题描述

我正在开发一个应用程序，我们希望允许我们的用户（技术支持人员）为员工的徽章拍照，这样我们就可以分析照片并提取徽章 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

解决方案

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

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

推荐阅读