從0到1打造一款react-native App(三)Camera

endless_road 發(fā)布于2019-08-22 18:07 / 3109人閱讀

摘要：當(dāng)組件被成功調(diào)用顯示時(shí)，組件主要分為兩塊，拍照和預(yù)覽。給定一個(gè)拍照照片的路徑值，即組件的，如果當(dāng)前組件存在一個(gè)照片的存儲(chǔ)路徑，就顯示預(yù)覽界面，如不存在就顯示拍照界面。而的值通過(guò)拍照成功的或者取消的狀態(tài)去控制創(chuàng)建與刪除。

關(guān)聯(lián)文章

從0到1打造一款react-native App(一)環(huán)境配置
從0到1打造一款react-native App(二)Navigation+Redux

項(xiàng)目地址：https://github.com/jiwenjiang...

拍照（攝像）需求

拍照的主要需求是在拍照后，不將照片在系統(tǒng)相冊(cè)中顯示出來(lái)，android拍照后會(huì)默認(rèn)存儲(chǔ)在DCIM文件夾當(dāng)中，而這次主要需要做的就是把照片放在自定義的文件夾當(dāng)中。

react-native-camera

拍照的第三方包有很多，比如react-native-image-picker,這個(gè)調(diào)用的是系統(tǒng)相機(jī)，用法比較簡(jiǎn)單，但是拓展性較差，不管是這次項(xiàng)目主要的需求（拍照后不在系統(tǒng)相冊(cè)顯示），還是本身拍照時(shí)的一些定制化的需求，類似微信拍照那種，都不容易實(shí)現(xiàn)，因此選擇了react-native-camera。

最新版的react-native-camera（v 1.1.x）已經(jīng)支持了人臉識(shí)別，文字識(shí)別等功能，還是很強(qiáng)大的，這些功能可能日后都會(huì)用得到，不過(guò)因?yàn)橐恍┌姹竞推脚_(tái)的原因之后會(huì)換成expo的camera，這里暫時(shí)還是介紹rn的camera（v 0.7）。

組件二次封裝：

import React, { Component } from "react";
import {
    Dimensions,
    StyleSheet,
    Button,
    Text,
    ImageBackground,
    View,
    TouchableOpacity
} from "react-native";
import Camera from "react-native-camera";
import Icon from "react-native-vector-icons/MaterialIcons";
import { deleteFile, mkdir, readPath } from "../../service/utils/fileOperations";
import RNFS from "react-native-fs";
import moment from "moment/moment";

class RNCamera extends Component {
    constructor(props) {
        super(props);
        this.state = {
            hidden: false,
            currentImage: null
        };
    }

    async takePicture() {
        const options = {};
        const { path: currentImage } = await this.camera.capture({ metadata: options });
        this.setState({ currentImage });
    }

    back() {
        this.setState({ currentImage: null, hidden: true });
    }

    async check() {
        const [date, unixTime] = [moment().format("YYYY/MM/DD"), moment().unix()];
        const dir = `${RNFS.DocumentDirectoryPath}/photo/${date}`;
        await mkdir(dir);
        const url = `${dir}/${unixTime}.jpg`;
        await RNFS.moveFile(this.state.currentImage, url);
        console.log(await readPath(dir));
        this.setState({ currentImage: null });
    }

    cancel() {
        deleteFile(this.state.currentImage);
        this.setState({ currentImage: null });
    }


    render() {
        const { currentImage, hidden } = this.state;
        return (
                
                    {currentImage ? 
                             this.cancel()}>
                                
                            
                             this.check()}>
                                
                            
                            
                            :  {
                                this.camera = cam;
                            }}
                                      style={styles.preview}
                                      aspect={Camera.constants.Aspect.fill}
                                      captureTarget={Camera.constants.CaptureTarget.temp}
                            >
                             this.back()}>
                                
                            
                             this.takePicture()}>
                                
                            
                            
                    }
                
        );
    }
}

const styles = StyleSheet.create(
        {
            container: {
                flex: 1,
                flexDirection: "row"
            },
            preview: {
                flex: 1,
                justifyContent: "center",
                flexDirection: "row",
                alignItems: "flex-end"
            },
            capture: {
                flex: 0,
                backgroundColor: "rgba(255, 255, 255, 0.3)",
                borderRadius: 25,
                margin: 20,
                marginBottom: 30,
                width: 50,
                height: 50,
                alignItems: "center",
                justifyContent: "center",
                zIndex: 1
            },
            photo: {
                flex: 1,
                justifyContent: "center",
                flexDirection: "row",
                alignItems: "flex-end"
            },
            hidden: {
                display: "none"
            }
        }
);

export default RNCamera;

沒(méi)有對(duì)react-native-camera做過(guò)多的配置，需要注意的配置是captureTarget屬性。在v0.7版本的camera當(dāng)中，captureTarget的可選配置項(xiàng)有4種。

Camera.constants.CaptureTarget.cameraRoll（默認(rèn)，存儲(chǔ)在系統(tǒng)相冊(cè)中）

Camera.constants.CaptureTarget.disk（存儲(chǔ)在磁盤中，這是官方推薦的存儲(chǔ)方式，會(huì)提升拍照的響應(yīng)速度）

Camera.constants.CaptureTarget.temp （存儲(chǔ)在臨時(shí)文件夾，當(dāng)前項(xiàng)目選擇方案）

Camera.constants.CaptureTarget.memory （以base64的形式存儲(chǔ)在內(nèi)存當(dāng)中，這個(gè)選項(xiàng)在之后的版本已經(jīng)被廢棄了，不過(guò)0.7版本還是可以用的）

實(shí)現(xiàn)基本思路是，通過(guò)外層調(diào)用來(lái)控制整個(gè)組件的樣式值，來(lái)管理組件的顯示與隱藏，即組件state的hidden屬性。當(dāng)組件被成功調(diào)用顯示時(shí)，組件主要分為兩塊，拍照和預(yù)覽。給定一個(gè)拍照照片的路徑值，即組件state的currentImage，如果當(dāng)前組件存在一個(gè)照片的存儲(chǔ)路徑，就顯示預(yù)覽界面，如不存在就顯示拍照界面。而currentImage的值通過(guò)拍照成功的Promise或者取消的狀態(tài)去控制創(chuàng)建與刪除。

拍照時(shí)去創(chuàng)建currentImage

async takePicture() {
        const options = {};
        const { path: currentImage } = await this.camera.capture({ metadata: options });
        this.setState({ currentImage });
    }

隱藏組建，返回調(diào)用界面

 back() {
        this.setState({ currentImage: null, hidden: true });
    }

拍照完成后預(yù)覽照片及確認(rèn)存儲(chǔ)

async check() {
        const [date, unixTime] = [moment().format("YYYY/MM/DD"), moment().unix()];
        const dir = `${RNFS.DocumentDirectoryPath}/photo/${date}`;
        await mkdir(dir);
        const url = `${dir}/${unixTime}.jpg`;
        await RNFS.moveFile(this.state.currentImage, url);
        console.log(await readPath(dir));
        this.setState({ currentImage: null });
    }

存儲(chǔ)這里用到了react-native-fs，這個(gè)第三方包就不過(guò)多介紹了，都是一些基礎(chǔ)的文件操作，比較好理解。通過(guò)在文件路徑下新建photo/xxxx-xx-xx的文件夾，確保每天拍攝的照片存放在當(dāng)日的文件夾，方便后續(xù)的文件預(yù)覽時(shí)的篩選。在照片拍攝完畢后，react-native-camera會(huì)將拍攝的照片存放至臨時(shí)文件夾，而這里需要做的就是將臨時(shí)文件夾的照片移動(dòng)至我們的目標(biāo)文件夾，這里順便說(shuō)一下，文件move操作的性能是優(yōu)于read+write的，這里切記用move。關(guān)于android文件存儲(chǔ)這里推薦一篇介紹的比較詳細(xì)的文章https://juejin.im/post/58b557...。

拍照完成后預(yù)覽照片及放棄存儲(chǔ)

cancel() {
        deleteFile(this.state.currentImage);
        this.setState({ currentImage: null });
    }

操作預(yù)覽：

照片回顯

在照片回顯時(shí)，檢測(cè)文件夾，讀取照片

const mkdir = async (url) => {
    const dirExists = await RNFS.exists(url);
    if (dirExists) {
        return new Promise(resolve => resolve(dirExists));
    }
    await RNFS.mkdir(url);
    return new Promise(resolve => resolve(url));
};
async function storageFile() {
    const date = moment().format("YYYY/MM/DD");
    const url = `${RNFS.DocumentDirectoryPath}/photo/${date}`;
    await mkdir(url);
    const files = await readPath(url);
    return files;
}

二維碼掃描

react-native-camera支持對(duì)各種條形碼的掃描識(shí)別，主要的屬性有兩個(gè)
barCodeTypes={[Camera.constants.BarCodeType.qr]} //掃碼的類型
onBarCodeRead={this.props.onScanResultReceived} //掃碼成功后的回調(diào)

項(xiàng)目這里直接把https://www.jianshu.com/p/347... 這篇文章中二次封裝好的一個(gè)二維碼掃描的組件復(fù)制了過(guò)來(lái)。主要是視圖層的二次封裝，有興趣的同學(xué)也可以自己封裝。

之后會(huì)把react-native-camera替換成expo中的camera，換完之后會(huì)繼續(xù)在這篇camera的文章中更新，也歡迎正在學(xué)習(xí)的同學(xué)一起交流~

GPU云服務(wù)器云服務(wù)器從0到1搭建視頻通話系統(tǒng) 從0開(kāi)始到1千萬(wàn)用戶從0打造音視頻直播系統(tǒng) 從1個(gè)想法到35萬(wàn)活躍用戶

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95520.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

endless_road

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow服務(wù)器

閱讀 2133·2023-04-26 02:15
學(xué)了這么久Python，居然還沒(méi)有搞清楚這件事……？

閱讀 2360·2021-11-19 09:40
Node.js v17.0.0 發(fā)布、VS Code 發(fā)布瀏覽器版本 | 淘系前端架構(gòu)周刊 - 21

閱讀 1125·2021-10-27 14:13
Vultr機(jī)房測(cè)評(píng) - Vultr歐洲荷蘭Amsterdam機(jī)房綜合速度和線路去程回程測(cè)試

閱讀 3403·2021-08-23 09:44
Kubernetes上的Service Mesh實(shí)踐：用EnvoyFilter擴(kuò)展Istio

閱讀 3705·2019-12-27 12:24
利用CSS中input制作開(kāi)關(guān)、輪播圖

閱讀 707·2019-08-30 15:53
css——圣杯布局

閱讀 1234·2019-08-30 10:53
初識(shí)React(2)：什么是JSX？

閱讀 2229·2019-08-26 12:14

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從0到1打造一款react-native App(三)Camera

相關(guān)文章

從無(wú)到有打造一個(gè)炫酷的進(jìn)度條效果

發(fā)表評(píng)論

0條評(píng)論

endless_road

男|高級(jí)講師

TA的文章

tensorflow服務(wù)器

學(xué)了這么久Python，居然還沒(méi)有搞清楚這件事……？

Node.js v17.0.0 發(fā)布、VS Code 發(fā)布瀏覽器版本 | 淘系前端架構(gòu)周刊 - 21

Vultr機(jī)房測(cè)評(píng) - Vultr歐洲荷蘭Amsterdam機(jī)房綜合速度和線路去程回程測(cè)試

Kubernetes上的Service Mesh實(shí)踐：用EnvoyFilter擴(kuò)展Istio

利用CSS中input制作開(kāi)關(guān)、輪播圖

css——圣杯布局

初識(shí)React(2)：什么是JSX？

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

從0到1打造一款react-native App(三)Camera

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！