react本机摄像机示例

Question

我是新来的-土生土长。我想打开可按onPress事件的相机。有谁能给我举个反应型摄像机的例子吗？我看过这份文件了。但实际上我不知道如何使用这个组件。我试过找出这个例子，但毫无头绪。因为我想定制摄像机。例如，我想在录制时显示1234。这就是为什么我要用反应-自然-视觉-相机。我试过那个包裹了。但我无法打开相机。我不知道我错了什么，文件对我来说也不清楚。所以我在这里寻求帮助。有人能帮忙吗？

Upload.js

import React, {
    useState,
    useEffect,
    useRef
} from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import { Avatar, Button, Card, Title, Chip, Paragraph } from 'react-native-paper';
import {
    SafeAreaView,
    ScrollView,
    StatusBar,
    StyleSheet,
    Text,
    useColorScheme,
    View,
    Image,
    ImageBackground,
    Pressable,
    Dimensions,
    PermissionsAndroid,
    Platform,
    TouchableOpacity
} from 'react-native';

import { Container } from 'native-base';
import Header from '../../Components/Header'
import colors from '../../Themes/Colors';
import Routes from '../../Navigation/Routes';
import useTranslation from '../../i18n';
import { IconX, ICON_TYPE } from '../../Icons';
import { ButtonX } from '../../Components';
import HeaderDoc from '../../Components/HeaderDoc';
import {
    launchCamera,
    launchImageLibrary
  } from 'react-native-image-picker';
import { useStoreActions, useStoreState } from 'easy-peasy';
import { org_id } from '../../Config';
import { Camera, useCameraDevices } from 'react-native-vision-camera';
import ImagePicker from 'react-native-image-crop-picker';
import ApplicantDetails from './ApplicationDetails';
import { CameraComponent } from './CameraComponent';

const UploadDoc = ({ navigation, route }) => {
    const { t } = useTranslation();
    const isDarkMode = useColorScheme() === 'dark';
    const tagList = ['a', 'b', 'c', 'D', 'E', 'F'];
    const [fileData, setfileData] = useState('');
    const [fileUri, setfileUri] = useState('');

    const camera = useRef(null);

    useEffect(() => {
        (async () => {
          const status = await Camera.requestCameraPermission();
          setHasPermission(status === 'authorized');
        })();
      }, []);

    return (
        <SafeAreaView style={{ flex: 1, backgroundColor: colors.white }}>
            <HeaderDoc title={'Upload Documents'} page={'1'} navigation={navigation} />
            <View style={{ flex: 1, flexDirection: 'column' }}>
                <ScrollView
                    showsVerticalScrollIndicator={false}
                    contentContainerStyle={{ marginBottom: 130, backgroundColor: colors.white }}>
                    <View style={{ marginHorizontal: 20, marginTop: 10, marginBottom: 50 }}>
                        <Pressable
                            style={{width: 100, height: 30, backgroundColor: colors.primary, justifyContent: 'center',alignSelf: 'center',alignItems: 'center'}}
                            onPress={()=> CameraComponent()}>
                                <Text style={{color: colors.white}}>Take Photo</Text>
                            </Pressable>
                    </View>

                </ScrollView>
            </View>
        </SafeAreaView>
    );
};

export default UploadDoc;

CameraComponent.js

import React, {
  useState,
  useEffect,
  useRef
} from 'react';
import {
  StyleSheet,
  TouchableOpacity,
} from 'react-native';

import {Camera, useCameraDevices} from 'react-native-vision-camera';

export const CameraComponent = () => {
  console.log("asmasas")

  useEffect(() => {
    (async () => {
const newCameraPermission = await Camera.requestCameraPermission()
  const newMicrophonePermission = await Camera.requestMicrophonePermission()
})();
  },[])

  const devices = useCameraDevices()
    const device = devices.back
  
    if (device == null) return null;
    return (
      <Camera
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        photo={true}
      />
    )
  
  }

Answer 1

首先，我假设您使用的是裸反应本地的，而不是世博的。

接下来，首先必须通过npm或纱线安装来安装软件包。

那我来告诉你安卓的

<uses-permission android:name="android.permission.CAMERA" />

<!-- optionally, if you want to record audio: -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />

您必须在AndroidManifest.xml中添加这些

下一次获取权限状态

下一个，然后在你的公司

App.js

export const App = () => {

    useEffect(() => {
  const newCameraPermission = await Camera.requestCameraPermission()
    const newMicrophonePermission = await Camera.requestMicrophonePermission()
    },[])

    const devices = useCameraDevices()
      const device = devices.back
    
      if (device == null) return <LoadingView />
      return (
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
        />
      )
    
    }

跳起来很有帮助