6

在我的react-native应用程序中,我需要拍照并将其保存到新的自定义相册中。相册应该不能通过菜单上的照片访问,因此我需要将相册设为私有,因此只能通过应用程序本身访问拍摄的照片。我在网上搜索,我猜它可以使用react-native-fsor react-native-fetch-blob,但它似乎只适用于Android. 但这并不是我所需要的。你能帮我提供任何文档、示例、代码或任何东西吗?

这是我已经创建的当前Camera组件,用户可以在其中拍照,将其保存到相机胶卷并在她/她想要的情况下访问照片。

import React, { Component } from 'react';
import {CardItem, Content, Container, Body, Left, Icon,  Header, Right, Footer, FooterTab, Button } from 'native-base';
import {
    Platform,
    StyleSheet,
    Dimensions,
    Text,
    ListView,
    View,
    Alert,
    TouchableOpacity,
    Image,
    CameraRoll,
    ScrollView
} from 'react-native';
import {Actions} from 'react-native-router-flux';

import { RNCamera } from 'react-native-camera';
const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

const {width, height} = Dimensions.get("window"),
    vw = width / 100
vh = height / 100


export default class Camera extends Component {

    constructor(props)
    {  super(props)

        this.state  = {
            buffer: false,
            bufferImage: '',
            dataSource: new ListView.DataSource({
                rowHasChanged: (row1, row2) => true
            }),
            galleryON: false,
            selectedImgTmstmp: '',
            cameraType: 'RNCamera.Constants.Type.back',
            flashMode: false,
            cameraSelf: true
        }
    }


    renderRow(img) {
        clr = this.state.selectedImgTmstmp===img.node.timestamp?'blue':'grey';
        return(
            <CardItem button horizontal={false} onPress={()=>this.setState({selectedImgTmstmp: img.node.timestamp})}
                      style={{flexDirection: 'column',borderWidth: 3,borderRadius: 4,padding: 0,  marginBottom: 5,
                          borderColor: clr,height: height/4, width: '48%'}}>
                <Image
                    style={{
                        width: '100%',
                        height: '100%',
                    }}
                    source={{ uri: img.node.image.uri }}
                />
            </CardItem>
        );
    }



    render() {
        if(this.state.galleryON){
            return(
                <Container>
                    <Content style={{backgroundColor: '#d8d8d8',height: '100%',width: width}}>
                        <ListView contentContainerStyle={{justifyContent: 'space-around',flexDirection: 'row', flexWrap: 'wrap'}}
                                  dataSource={this.state.dataSource}
                                  enableEmptySections={true}
                                  renderRow={(rowData)=>this.renderRow(rowData)}>
                        </ListView>

                    </Content>
                    <View style={{flexDirection: 'row',width: width, height: 40, backgroundColor: '#ff5a00', alignItems: 'center', justifyContent: 'center'}}>
                        <Left style={{flex: 1, margin: 5}}>
                            <Text onPress={()=>this.setState({galleryON: false, selectedImgTmstmp: ''})} style={{fontWeight: 'bold', fontSize: 15}}>Cancel</Text>
                        </Left>
                        <Body style={{flex: 2}}>
                        <Text>Select Image</Text>
                        </Body>
                        <Right style={{flex: 1, margin: 5}}>
                            <Text onPress={()=>this.state.selectedImgTmstmp===''?null:Actions.pop()} style={{fontWeight: 'bold', fontSize: 15}}>Proceed</Text>
                        </Right>
                    </View>
                </Container>
            );
        }


        return (
            this.state.buffer===false?
                <Container style={styles.container}>
                    <Header style={{backgroundColor: '#000000',borderBottomWidth: 1, borderColor: '#FFF'}}>
                        <Left>
                            <Button transparent onPress={()=>this.setState({flashMode: !this.state.flashMode})}>
                                <Icon style={{color: '#FFF'}} name={this.state.flashMode?'ios-flash-outline':'ios-flash'}/>
                            </Button>
                        </Left>
                        <Right>
                            <Button transparent  onPress={()=>this.setState({cameraSelf: !this.state.cameraSelf})}>
                                <Icon style={{color: '#FFF'}} name='ios-reverse-camera-outline'/>
                            </Button>
                        </Right>
                    </Header>
                    <RNCamera
                        ref={ref => {
                            this.camera = ref;
                        }}
                        style = {styles.preview}
                        type={this.state.cameraSelf?RNCamera.Constants.Type.front:RNCamera.Constants.Type.back}
                        flashMode={this.state.flashMode?RNCamera.Constants.FlashMode.on:RNCamera.Constants.FlashMode.off}
                        permissionDialogTitle={'Permission to use camera'}
                        permissionDialogMessage={'We need your permission to use your camera phone'}
                    />
                    <View style={{flexDirection: 'row', justifyContent: 'space-between', height: '10%', alignItems: 'center',backgroundColor: '#000000'}}>
                        <TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>Actions.pop()}>
                            <Text style={{color: '#FFFF', fontSize: 25}}>Cancel</Text>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ height: 40, margin: 5}} onPress={this.takePicture.bind(this)}>
                            <Icon style={{color: '#FFF', fontSize: 40}} name='ios-radio-button-on'/>
                        </TouchableOpacity>
                        <TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.getGallery()}>
                            <Text style={{color: '#FFFF', fontSize: 25}}>Photos</Text>
                        </TouchableOpacity>
                    </View>
                </Container>
                :
                <Container style={{width: width, height: height, alignItems: 'center'}}>
                    <View style={{width: width, height: height, flexDirection: 'column'}}>
                        <Image source={{uri: this.state.bufferImage}} style={{width: '100%', height: '90%'}}/>
                        <View style={{flexDirection: 'row', justifyContent: 'space-between', height: '10%', alignItems: 'center',backgroundColor: '#000000'}}>
                            <TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.setState({bufferImage: '', buffer: false})}>
                                <Text style={{color: '#FFFF', fontSize: 25}}>Cancel</Text>
                            </TouchableOpacity>
                            <TouchableOpacity style={{ height: 40, margin: 5}} onPress={()=>this.savePictureToRoll(this.state.bufferImage)}>
                                <Text style={{color: '#FFFF', fontSize: 25}}>Done</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </Container>
        );
    }

    getDataSource(posts) {
        return this.state.dataSource.cloneWithRows(posts);
    }


    getGallery(){
        CameraRoll.getPhotos({
            first: 100,
            assetType: 'Photos'
        })
            .then(photos => {
                this.setState({dataSource: this.getDataSource(photos.edges), galleryON: true},()=>console.log(this.state.dataSource))
            })
    }

    takePicture = async function() {
        if (this.camera) {
            const options = { quality: 0.5, base64: true };
            const data = await this.camera.takePictureAsync(options)
            console.log("DATA: ",data);
            console.log(data.uri);
            this.setState({buffer: true,bufferImage: data.uri})
        }
    };


    savePictureToRoll(uri){
        console.log("DATA.URI: ",this.state.bufferImage);
        CameraRoll.saveToCameraRoll(uri, 'photo');
        this.setState({bufferImage: '', buffer: false},()=>Alert.alert("IMAGE SAVED"), Actions.pop())
    }

}
4

0 回答 0