React Native開發之expo中camera的基本使用

　　之前做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結果：