React Native學習－CameraRoll

標籤：

react-native中CameraRoll模組提供了訪問本地相簿的功能。

在react版本為0.23.0的項目中，不支援Android，而且在iOS中使用CameraRoll還需要我們手動操作：

iOS：

1. 將RCTCameraRoll.xcodeproj添加到我們的項目中：展開項目 > Libraies  右鍵Libraies點擊 “Add Files to ‘項目名’ ”，找到 專案檔夾／node_modules/react-native/Libraries/CameraRoll/RCTCameraRoll.xcodeproj , 添加到項目裡。
2. 我們要把libRCTCameraRoll.a這個苦添加到主專案的Link Binary With Libraries中，如：
   

經過這樣的添加我們在項目中再使用CameraRoll裡邊的函數就不會出錯了。

 

CameraRoll模組中有兩個函數：saveImageWithTag()、getPhotos()。

saveImageWithTag()

儲存一個圖片到相簿。

@param {string} tag 在安卓上，本參數是一個本地URI，例如"file:///sdcard/img.png".

在iOS裝置上可能是以下之一：

• 本地URI
• 資產庫的標籤
• 非以上兩種類型，表示圖片資料將會儲存在記憶體中（並且在本進程持續的時候一直會佔用記憶體）。

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

樣本：

CameraRoll.saveImageWithTag(image).then(function (success) {            Alert.alert(                ‘‘,                ‘儲存到相簿成功‘,                [                    {text: ‘確定‘, onPress: () => console.log(success)}                ]            )        }, function (error) {            Alert.alert(                ‘‘,                ‘儲存到相簿失敗‘,                [                    {text: ‘確定‘, onPress: () => console.log(error)}                ]            )        }    )}

獲得相簿中的照片。getPhotos()

學習這個功能是在官方demo中學習的，它寫成了一個可以使用的js檔案CameraRollView.js,我們需要將該檔案引入我們的項目中。

附件：CameraRollView.js

檔案開啟會有錯誤顯示，只是文法不一樣，這個不影響效果。

使用方法：

import CameraRollView from ‘../CameraRollView‘;export  default class CameraRollView extends Component {    constructor(props) {        super(props);        CameraRoll.getPhotos({            first: 21,            assetType: ‘Photos‘        }).then(function (data) {        }, function (error) {        })    }    _renderImage(asset) {        var windowSize = require(‘Dimensions‘).get(‘window‘);        return (            <TouchableOpacity key={asset}>                <Image source={asset.node.image} style={{width: (windowSize.width-30)/3, height: 110, margin:5}}/>            </TouchableOpacity>        );    }    render() {        return (<View style={{flex:1}}>                  <CameraRollView renderImage={this._renderImage}/>                </View>        )    }}

 

React Native學習－CameraRoll