本文主要介紹CaremaRoll的使用(儲存圖片,獲取手機圖片) 圖片上傳(常用於上傳頭像功能)

CaremaRoll介紹

結合官方文件做說明:

CameraRoll模組提供了訪問本地相簿的功能。在iOS上使用這個模組之前，你需要先連結RCTCameraRoll庫，具體做法請參考連結原生庫文件。

譯註：本模組只提供了基本的訪問圖片的功能，並沒有提供相簿介面。對於多數開發者來說，可能第三方的react-native-image-crop-picker的功能更為完整易用（可多選、壓縮、裁剪等）。

iOS 10的許可權要求

從iOS10開始，訪問相簿需要使用者授權。你需要在Info.plist中新增一條名為NSPhotoLibraryUsageDescription的鍵，然後在其值中填寫向用戶請求許可權的具體描述。編輯完成後這個鍵在Xcode中實際會顯示為Privacy - Photo Library Usage Description。

iOS 11的許可權要求

從iOS11開始，如果您的專案有儲存圖片需求，需要額外申請使用者授權。你需要在Info.plist中新增一條名為NSPhotoLibraryAddUsageDescription的鍵，然後在其值中填寫向用戶請求許可權的具體描述。編輯完成後這個鍵在Xcode中實際會顯示為Privacy - Photo Library Additions Usage Description。而名為NSPhotoLibraryUsageDescription的鍵此時僅控制相簿的讀取。具體說明請翻閱官方文件搜尋相關鍵值。

我們可以看到,一共有兩個許可權需要宣告, 一個是讀取相簿,一個是儲存圖片.
雖然有第三方,但我想自己用基礎的API來實現這個功能 , 也能讓以後對這方面的東西接觸的時候有更好的理解.

然後看一下API:

static saveToCameraRoll(tag, type?)

（1）儲存一個圖片到相簿。
（2）@param {string} tag

在安卓上，本引數是一個本地URI，例如”file:///sdcard/img.png”.
在iOS裝置上可能是以下之一：

• 本地URI
• 資源庫的標籤
• 非以上兩種型別，表示圖片資料將會儲存在記憶體中（並且在本程序持續的時候一直會佔用記憶體）,
• tag 可以是 url、assets-library、記憶體圖片中的一種。

（3）引數 type 不是必須的，可選值是’photo’ 或 ‘video’。用來表示存的是圖片還是視訊。不指定的話程式也會根據字尾自行判斷。（結尾為 .mov 或 .mp4 為視訊，其它為圖片）

返回一個Promise，操作成功時返回新的URI。

static getPhotos(params: object)

把圖片或視訊儲存到相簿中。
返回一個帶有圖片識別符號物件的Promise。返回的物件的結構參見getPhotosReturnChecker。

params：物件 一些篩選的規則 有4個成員變數

1.first 數值 希望獲取多少張圖片的資訊

2.groupTypes 字串 預設為SavedPhotos [Album All Event Faces Library PhotoStream] 僅支援IOS平臺 用來指定獲取圖片或視訊的型別

3.assetType 字串 預設為Photos 表示只獲取圖片 [All Videos]

4.after 字串 用來記錄上一次獲取圖片的結束標誌 方便可以接著上次的位置繼續獲取 它的值不能由開發者隨意賦予，而是應當在上一次獲取圖片後儲存其值。通常，在Android平臺，一開始就給這個值為null，但是在IOS平臺，設定為null會拋一個無法捕捉的異常，導致紅屏。

{
first: 5, 
groupTypes: 'All', 
assetType: 'Photos',
//after:null
}

返回一個Promise，操作成功時返回符合getPhotosReturnChecker結構的物件。

介紹一下使用方法

儲存圖片

    saveImg(img) {
        let promise = CameraRoll.saveToCameraRoll(img);
        promise.then(function (result) {
            alert('儲存成功！地址如下：\n' + result);
        }).catch(function (error) {
            alert('儲存失敗！\n' + error);
        });
    }

也可以直接寫一句程式碼:

 CameraRoll.saveToCameraRoll(img).then(result => {
            alert('儲存成功！地址如下：\n' + result);
        }).catch(error => {
            alert('儲存失敗！\n' + error);
        })

這裡的引數img 傳來的是一個圖片地址 :

let imgURL = "https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=8d3a9ea62c7f9e2f6f351b082f31e962/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg"

讀取相簿

這裡我拆分成了兩個方法, 一個方法是獲取promise物件, 第二個方法是對這個promise進行分析,拿出我需要的資料.
先看第一個方法 , 前面先不用看, 中間是定義已下param引數, 最後是執行方法,拿到promise.
然後把這個promise給方法2進行分析,取資料.

    //獲取圖片列表
    getImages() {
        if (this.state.nomore) {
            alert('沒有更多圖片了');
            return
        }
        let param = {first: 5, groupTypes: 'All', assetType: 'Photos'};
        // 如果不是第一次取圖片，則this.state.lastCursor不為空，下一次取圖片時就從上次的結尾開始取
        if (this.state.lastCursor) {
            param.after = this.state.lastCursor;
        }

        CameraRoll.getPhotos(param).then(data => {
            console.log(data)
            this._appendAssets(data); // 取到圖片資料後，交由appendAssets處理
        }, (e) => {
        }).done();
    }

這裡,我先遍歷了一下data.edges ,這是一個圖片資訊的陣列, node.image.uri是圖片的uri地址 , 上面圖片的資料就是我這裡得到的 . 遍歷拿到這個uri就可以了.
data.page_info.has_next_page 這個是判斷是否還有沒載入的圖片, 有就是true/沒有未載入的就是false.
如果我們需要分頁載入之類的功能 這個就派上用場了,也是我第一個方法中用來判斷是否有更多圖片的引數.
data.page_info.end_cursor 是這次獲取到的所有圖片裡最後一個圖片的uri , 我們下次再去讀相簿,就可以從這個開始載入了. 可以實現分頁功能 .

    _appendAssets(data) {
        let newState = {};
        let edges = data.edges;
        let photos = [];
        for (let i in edges) {
            photos.push(edges[i].node.image.uri);
        }
        console.log(photos)
        if (!data.page_info.has_next_page) { //已經到相簿的末尾了
            newState.noMore = true;
        }
        if (photos.length > 0) { //如果此次載入的圖片數量大於0
            newState.lastCursor = data.page_info.end_cursor;
            newState.photos = this.state.photos.concat(photos);
            this.setState(newState)
        }

    }

獲取到的相簿圖片用list來展示.
距離底部0.1的時候就去嘗試獲取相簿圖片, 每次獲取5張, 直到全部載入完成. 這裡的0.1是比例,不是px.

<FlatList
                    data={this.state.photos}
                    renderItem={({item}) =>
                        <TouchableOpacity onPress={() => this.setState({
                            img: item
                        })}>
                            <Image
                                source={{uri: item}}
                                style={{width: 250, height: 250, resizeMode: 'stretch'}}/>
                        </TouchableOpacity>}
                    onEndReachedThreshold={0.1}
                    onEndReached={() => this.getImages()}
                />

上傳圖片

首先要有後臺 我這裡沒有 所以就沒有實現這個功能, 但是程式碼是完成了的.
uri 就是圖片的uri, 跟我們前面的一樣. token 是用來鑑別使用者的.
裡面還有個引數url 是後臺接收圖片的地址
這個應該比較好理解了.

    upLoadImg(uri, token) {
        let imgFile = new FromData();
        imgFile.append('file', {uri, type: 'application/octet-stream', name: 'head.jpg'})
        fetch('url', {
            method: 'POST', headers: {
                'Content-Type': 'multipart/form-data;charset=utf-8',
                "x-access-token": token,
            },
            body: imgFile,
        }).then()
    }

最後放上原始碼:

'use strict';
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    CameraRoll,
    Image,
    FlatList
} from 'react-native';

//網路圖片地址
let imgURL = "https://ss1.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=8d3a9ea62c7f9e2f6f351b082f31e962/500fd9f9d72a6059099ccd5a2334349b023bbae5.jpg"

export default class Appme extends Component {

    //建構函式
    constructor(props) {
        super(props);
        this.state = {
            photos: [],
            lastCursor: '',
            nomore: false
        };
    }

    componentDidMount() {
        this.getImages();
    }

    render() {

        let data = [{title: 'a'}, {title: 'a'}, {title: 'a'}, {title: 'a'},];
        return (
            <View style={styles.container}>
                <View style={styles.image}>
                    <Image style={styles.img}
                           source={{uri: this.state.img}}
                           resizeMode="contain"/>
                </View>
                <View>
                    <Text onPress={this.saveImg.bind(this, imgURL)} style={[styles.saveImg]}>
                        儲存圖片到相簿
                    </Text>
                </View>
                <View>
                    <Text onPress={() => this.getImages()} style={[styles.saveImg]}>
                        獲取圖片列表
                    </Text>
                </View>

                <FlatList
                    data={this.state.photos}
                    renderItem={({item}) =>
                        <TouchableOpacity onPress={() => this.setState({
                            img: item
                        })}>
                            <Image
                                source={{uri: item}}
                                style={{width: 250, height: 250, resizeMode: 'stretch'}}/>
                        </TouchableOpacity>}
                    onEndReachedThreshold={0.1}
                    onEndReached={() => this.getImages()}
                />
            </View>
        )
    }


    //儲存圖片
    saveImg(img) {
        var promise = CameraRoll.saveToCameraRoll(img);
        promise.then(function (result) {
            alert('儲存成功！地址如下：\n' + result);
        }).catch(function (error) {
            alert('儲存失敗！\n' + error);
        });

        CameraRoll.saveToCameraRoll(img).then(result => {
            alert('儲存成功！地址如下：\n' + result);
        }).catch(error => {
            alert('儲存失敗！\n' + error);
        })
    }


    //獲取圖片列表
    getImages() {
        if (this.state.nomore) {
            alert('沒有更多圖片了');
            return
        }
        let param = {first: 5, groupTypes: 'All', assetType: 'Photos'};
        // 如果不是第一次取圖片，則this.state.lastCursor不為空，下一次取圖片時就從上次的結尾開始取
        if (this.state.lastCursor) {
            param.after = this.state.lastCursor;
        }

        CameraRoll.getPhotos(param).then(data => {
            console.log(data)
            this._appendAssets(data); // 取到圖片資料後，交由appendAssets處理
        }, (e) => {
        }).done();
    }

    _appendAssets(data) {
        let newState = {};
        let edges = data.edges;
        let photos = [];
        for (let i in edges) {
            photos.push(edges[i].node.image.uri);
        }
        console.log(photos)
        if (!data.page_info.has_next_page) { //已經到相簿的末尾了
            newState.noMore = true;
        }
        if (photos.length > 0) { //如果此次載入的圖片數量大於0
            newState.lastCursor = data.page_info.end_cursor;
            newState.photos = this.state.photos.concat(photos);
            this.setState(newState)
        }

    }

    upLoadImg(uri, token) {
        let imgFile = new FromData();
        imgFile.append('file', {uri, type: 'application/octet-stream', name: 'head.jpg'})
        fetch('url', {
            method: 'POST', headers: {
                'Content-Type': 'multipart/form-data;charset=utf-8',
                "x-access-token": token,
            },
            body: imgFile,
        }).then()
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        // justifyContent: 'center',
        backgroundColor: 'white',
        // alignItems: 'center'
    },
    welcome: {
        marginTop: 20,
        fontSize: 20,
    },
    image: {
        borderWidth: 1,
        width: 300,
        height: 100,
        borderRadius: 5,
        borderColor: '#ccc',
        marginTop: 50
    },
    img: {
        height: 98,
        width: 300,
        resizeMode: 'stretch'
    },
    saveImg: {
        height: 30,
        padding: 6,
        textAlign: 'center',
        backgroundColor: '#3BC1FF',
        color: '#FFF',
        marginTop: 10,
    }
});

本文僅提供思路 所以 有點醜…
就不放UI圖了