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

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

項目地址：https://github.com/jiwenjiang...

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

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

最新版的react-native-camera（v 1.1.x）已經(jīng)支持了人臉識別，文字識別等功能，還是很強大的，這些功能可能日后都會用得到，不過因為一些版本和平臺的原因之后會換成expo的camera，這里暫時還是介紹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 (
                
        );
    }
}

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;

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

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

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

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

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

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

拍照時去創(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)存儲

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

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

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

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

操作預(yù)覽：

在照片回顯時，檢測文件夾，讀取照片

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支持對各種條形碼的掃描識別，主要的屬性有兩個
barCodeTypes={[Camera.constants.BarCodeType.qr]} //掃碼的類型
onBarCodeRead={this.props.onScanResultReceived} //掃碼成功后的回調(diào)

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

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