javascript - React Native 中的 Expo-camera 无法正常工作

Question

我正在尝试使用 React 本机应用程序访问相机。我已经从官方文档中复制了所有代码。每个人都做了同样的事情，包括官方的 expo-docs https://docs.expo.io/versions/latest/sdk/camera/。我访问相机和拍照的代码是

export default function Cameracontrol() {

        const [hasPermission, setHasPermission] = useState(null);
        const [type, setType] = useState(Camera.Constants.Type.back);


        async function takePicture() {

            console.log(this.camera)
            if (this.camera) {
                console.log('Pictactue Taken')
                let photo = await this.camera.takePictureAsync();
            }
            else {
                console.log('Caera Not Open');

            }
        }


        useEffect(() => {
            (async () => {
                const { status } = await Camera.requestPermissionsAsync();
                setHasPermission(status === 'granted');
            })();
        }, []);

        if (hasPermission === null) {
            return <View />;
        }
        if (hasPermission === false) {
            return <Text>No access to camera</Text>;
        }

        return (
            <View style={{ flex: 1 }}>
                <Camera style={{ flex: 1 }} type={type}
                ref={camera => this.camera = camera}
                >
                    <View
                        style={{
                            flex: 1,
                            backgroundColor: 'transparent',
                            flexDirection: 'row',
                        }}>

                        <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between", margin: 20 }}>

                            <TouchableOpacity

                                style={{
                                    alignSelf: 'flex-end',
                                    alignItems: 'center',
                                    backgroundColor: 'transparent',
                                }}
                                onPress={() => {
                                    setType(
                                        type === Camera.Constants.Type.back
                                            ? Camera.Constants.Type.front
                                            : Camera.Constants.Type.back
                                    );
                                }}>
                                <Ionicons
                                    name="ios-photos"
                                    style={{ color: "#fff", fontSize: 40 }}
                                />

                            </TouchableOpacity>
                            <TouchableOpacity
                                onPress={takePicture}
                                style={{
                                    alignSelf: 'flex-end',
                                    alignItems: 'center',
                                    backgroundColor: 'transparent',
                                }}>
                                <FontAwesome
                                    name="camera"
                                    style={{ color: "#fff", fontSize: 40 }}
                                />
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={{
                                    alignSelf: 'flex-end',
                                    alignItems: 'center',
                                    backgroundColor: 'transparent',
                                }}>
                                <MaterialCommunityIcons
                                    name="camera-switch"
                                    style={{ color: "#fff", fontSize: 40 }}
                                />
                            </TouchableOpacity>
                        </View>
                    </View>
                </Camera>
            </View>
        );
    }

我遇到以下错误。

undefined is not an object (evaluating '_this.camera = camera')

此错误与行密切相关

ref={camera => this.camera = camera}

通过删除这行代码，错误也被删除了。

如果有男孩能帮我解决这个问题，我真的很感激。

标签： javascriptreactjsreact-native

Answer 1

你在一个功能组件中，而不是一个类。因此，您不能使用this. 此外，ref不像在课堂上那样工作。

你应该使用useRef：https ://reactjs.org/docs/hooks-reference.html#useref

const inputEl=useRef(null);

<input ref={inputEl} type="text" />