Question

我正在尝试使用Expo的Camera对象拍照。

使用Expo 25.0.0和React-native 0.52.0

我遇到的问题的简单示例代码如下：

import React from 'react';
import { Camera } from 'expo';
import { Text, View, TouchableOpacity } from 'react-native';

export default class App extends React.Component {
    async press() {
        console.log('Button Pressed');
        if (this.camera) {
            console.log('Taking photo');
            let photo = await this.camera.takePictureAsync();
            console.log(photo);
        }
    }

    render() {
        return (
            <Camera
                style={{ flex: 1 }}
                ref={ (ref) => {this.camera = ref} }
            >
                <View style={{ flex: 1 }}></View>
                <TouchableOpacity
                    style={{ flex: 0, backgroundColor: 'red' }}
                    onPress={this.press}
                >
                    <Text>Touch Me</Text>
                </TouchableOpacity>
            </Camera>
        );
    }
}

会发生什么：

相机视图显示
press()回调已被调用，但未拍摄照片
如果我删除if (this.camera)支票，则会收到警告[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'this.camera.takePictureAsync')]

在我看来，对相机对象的引用从未进行过，但我似乎无法弄清楚为什么会出现这种情况，或者我的做法与文档不同。

Answer 1

绑定press回调或使用箭头功能。

将onPress={this.press}替换为onPress={this.press.bind(this)}

React-native refs和Expo Camera

1 个答案: