react-native视频摄像机示例

Question

我是react-native的新手。我想在Pressable 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

首先我假设你使用的是裸react native而不是expo

接下来，首先你必须通过npm i或yarn install安装包。

然后告诉你android

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

你必须在AndroidManifest.xml

中添加这些下一步使用

获取权限状态next then in your comp

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}
/>
)

}

希望它有帮助