React Native Camera的新手教程

 

自从手机有了摄像头之后，我们可以很方便地把生活中的瞬间记录下来。我们可以通过照片和视频来回顾那些美好的瞬间。自然而然，和我们最爱的朋友和家人分享这些照片和视频就成为了一个必然的需求。

所以，在你写一个app的时候，很可能就希望他能支持拍照和拍视频的功能。假如你还不太清楚怎么来实现的，本文就是来简单介绍如何使用React Native实现相关的功能。

 

预先安装的包：

• expo-camera:这个包是用来拍照和视频的。
• Expo-av: 这个包是用来导入视频并进行播放的。

可以使用下面的命令来安装相关的包：

yarn add expo-camera expo-av

或者

npm install expo-camera expo-av

 

实现相机的功能

我们可以简单通过下面的代码来把camera组件假如你项目中的一个view里：

import React, { useState, useRef, useEffect } from "react";
import {
  StyleSheet,
  Dimensions,
  View,
  Text,
  TouchableOpacity,
  SafeAreaView,
} from "react-native";
import { Camera } from "expo-camera";
import { Video } from "expo-av";

const WINDOW_HEIGHT = Dimensions.get("window").height;

const closeButtonSize = Math.floor(WINDOW_HEIGHT * 0.032);
const captureSize = Math.floor(WINDOW_HEIGHT * 0.09);

export default function App() {
  const [hasPermission, setHasPermission] = useState(null);
  const [cameraType, setCameraType] = useState(Camera.Constants.Type.back);
  const [isPreview, setIsPreview] = useState(f