React Native开发之expo中camera的基本使用

Posted 2021-01-26 bai1218

　　之前做RN项目没调用过本地摄像头，今天下班早，做了一个简单的小demo：主要实现的功能：点击拍照按钮进入拍照界面，点击flip进行前后摄像头转换，点击开始拍照实现拍照功能(没写保存到本地的功能，大家可以自主开发)，代码是参照expo官网的Camera写的一个小demo，大家可以结合的expo官网来看，该加注释的地方都在代码中加了，希望能对你有所帮助。

　　

import React from ‘react‘

import {
    View,
    Text,
    TouchableOpacity,
    Button,
    Image  
} from ‘react-native‘
import { Camera, Permissions } from ‘expo‘;

interface Props{

}
//定义Camera的两个属性
interface State{
    hasCameraPermission?:any,        
    type?:any,
    isShowCamera: Boolean,
    uri:string
}

export default class componentName extends React.Component<Props,State> {
    public camera:any              //定义一个camera来拿到Camera节点

    constructor(props:Props) {
        super(props)
        this.state = {
            hasCameraPermission: null,              //照相机权限
            type: Camera.Constants.Type.back,       //照相机类型
            isShowCamera: false,                    //是否开启照相机
            uri: ‘‘
        }
    }
    async componentWillMount() {
        const { status } = await Permissions.askAsync(Permissions.CAMERA);
        this.setState({ hasCameraPermission: status === ‘granted‘ });
    }
    //把官网里面的render粘过来
    render() {
        const { hasCameraPermission } = this.state;
        if (hasCameraPermission === null) {
          return <View />;
        } else if (hasCameraPermission === false) {
          return <Text>没有权限打开照相机</Text>;
        } else {
          return (
            <View style={{ flex: 1, paddingTop: 20 }}>
              {
                  !this.state.isShowCamera ?
                  <View>
                      <View>
                          <Image source={{uri:this.state.uri}} style={{width: 200, height: 200}}></Image>
                      </View>
                      <Button
                        onPress={this.takePicture.bind(this)}
                        title=‘拍照‘
                    ></Button>
                  </View>:
                  <Camera 
                    style={{ flex: 1 }} 
                    type={this.state.type}
                    ref={(el:any)=>this.camera=el}      //参照官网的Methods
                  >
                    <View
                        style={{
                            flex: 1,
                            backgroundColor: ‘transparent‘,
                            flexDirection: ‘row‘,
                        }}>
                        <TouchableOpacity
                            style={{
                            flex: 1,
                            alignSelf: ‘flex-end‘,
                            alignItems: ‘center‘,
                            }}
                            onPress={() => {
                            this.setState({
                                type: this.state.type === Camera.Constants.Type.back
                                ? Camera.Constants.Type.front
                                : Camera.Constants.Type.back,
                            });
                            }}>
                            <Text
                            style={{ fontSize: 18, marginBottom: 10, color: ‘white‘ }}>
                            {‘ ‘}Flip{‘ ‘}
                            </Text>
                        </TouchableOpacity>
                        {/* 复制一个开始拍照的点击按钮 */}
                        <TouchableOpacity
                            style={{
                            flex: 1,                    //flex为0.1改成flex为1
                            alignSelf: ‘flex-end‘,
                            alignItems: ‘center‘,
                            }}
                            //参照官网的Methods
                            onPress={async () => {
                                if (this.camera) {
                                    let photo = await this.camera.takePictureAsync();
                                    console.log(photo)
                                    this.setState({
                                        isShowCamera: false,
                                        uri: photo.uri
                                    })
                                }
                            }}>
                            <Text
                            style={{ fontSize: 18, marginBottom: 10, color: ‘white‘ }}>
                            {‘ ‘}开始拍照{‘ ‘}
                            </Text>
                        </TouchableOpacity>
                    </View>
                </Camera>
              }
            </View>
          );
        }
    }
    takePicture(){
        this.setState({
            isShowCamera: true
        })
    }
}

 

控制台打印的photo结果：