在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称:reime005/react-native-camera-hooks开源软件地址:https://github.com/reime005/react-native-camera-hooks开源编程语言:JavaScript 58.7%开源软件介绍:
Hooks for React Native Camera
React Native Camera Hooks provides you with functionality to use the React Native Camera API with Functional Components.
import { View, TouchableOpacity, TouchableWithoutFeedback } from 'react-native';
import { RNCamera } from 'react-native-camera';
import { useCamera } from 'react-native-camera-hooks';
const FunctionalComponentExample = ({ initialProps }) => {
const [
{ cameraRef, type, ratio, autoFocus, autoFocusPoint, isRecording },
{
toggleFacing,
touchToFocus,
textRecognized,
facesDetected,
recordVideo,
setIsRecording,
},
] = useCamera(initialProps);
return (
<View style={{ flex: 1 }}>
<RNCamera
ref={cameraRef}
autoFocusPointOfInterest={autoFocusPoint.normalized}
type={type}
ratio={ratio}
style={{ flex: 1 }}
autoFocus={autoFocus}
onTextRecognized={textRecognized}
onFacesDetected={facesDetected}
/>
<TouchableWithoutFeedback
style={{
flex: 1,
}}
onPress={touchToFocus}
/>
<TouchableOpacity
testID="button"
onPress={toggleFacing}
style={{ width: '100%', height: 45 }}>
{type}
</TouchableOpacity>
{!isRecording && (
<TouchableOpacity
onPress={async () => {
try {
setIsRecording(true);
const data = await recordVideo();
console.warn(data);
} catch (error) {
console.warn(error);
} finally {
setIsRecording(false);
}
}}
style={{ width: '100%', height: 45 }}
/>
)}
</View>
);
}; Features
Constants are defined in constants and initalState.
InstallationTo install react-native-camera-hooks, do either npm install --save react-native-camera-hooks or yarn add react-native-camera-hooks Note that this requires a react-native version > 0.59 which supports React Hooks. Also, react-native-camera has to be installed.
TODO
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论