【问题标题】:React-native camera showing blank screenReact-native 相机显示空白屏幕
【发布时间】:2021-08-26 09:21:22
【问题描述】:

无法看到相机,在真实设备上使用它时屏幕上显示空白屏幕。

下面是我的代码

import React, { useRef } from 'react';
import { AppRegistry, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { RNCamera } from 'react-native-camera';

export default function Create() {
    const cameraRef = useRef();

    const takePicture = async () => {
        // if (this.camera) {
        //  const options = { quality: 0.5, base64: true };
        //  const data = await this.camera.takePictureAsync(options);
        //  console.log(data.uri);
        // }
    };
    return (
        <View style={styles.container}>
            <RNCamera
                ref={cameraRef}
                style={styles.preview}
                type={RNCamera.Constants.Type.back}
                flashMode={RNCamera.Constants.FlashMode.on}
                androidCameraPermissionOptions={{
                    title: 'Permission to use camera',
                    message: 'We need your permission to use your camera',
                    buttonPositive: 'Ok',
                    buttonNegative: 'Cancel',
                }}
                androidRecordAudioPermissionOptions={{
                    title: 'Permission to use audio recording',
                    message: 'We need your permission to use your audio',
                    buttonPositive: 'Ok',
                    buttonNegative: 'Cancel',
                }}
            />
            <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'center' }}>
                <TouchableOpacity style={styles.capture}>
                    <Text style={{ fontSize: 14 }}> SNAP </Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        backgroundColor: 'black',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
});

【问题讨论】:

    标签: react-native react-native-camera


    【解决方案1】:

    我通过从 android/src/main/mainfest 中删除 android:hardwareAccelerated="false" 解决了这个问题

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-11-03
      • 1970-01-01
      • 2016-03-07
      • 1970-01-01
      • 2020-04-27
      • 2023-02-05
      • 1970-01-01
      相关资源
      最近更新 更多