世博会相机预览组件开始显示蓝屏

Question

npm包中的相机预览组件'expo- Camera‘除了黑屏之外什么都不显示。我甚至用以下代码创建了一个全新的托管世博会项目：

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

export default function App() {
  return (
    <View style={styles.container}>
      <Camera />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

这是我的package.json文件：

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "expo-camera": "^7.0.0",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-web": "^0.11.7"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.1.0"
  },
  "private": true
}

这是我的app.json：

{
  "expo": {
    "name": "testcamera",
    "slug": "testcamera",
    "privacy": "public",
    "sdkVersion": "35.0.0",
    "platforms": [
      "ios",
      "android",
      "web"
    ],
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true
    }
  }
}

它突然停止工作了。我做的最后一件事是发布世博会项目，在此之前它还在运行。

Answer 1

钩子和功能组件的工作示例，请求权限：

https://snack.expo.io/@djalik/camera

Answer 2

// this is in the constructor
    props.navigation.addListener('focus', () => {
      console.log("hey man you are looking to me");
      this.setState({loaded:true});
    });
    props.navigation.addListener('blur', () => {
      console.log("hey man where are you going?");
      this.setState({loaded:false});
    });

//this is in the render
        {
          this.state.loaded &&
          <Camera
              style={ styles.camera }
              type={this.state.camType}
              ratio={ " "+CameraRatio[0]+":"+CameraRatio[1] +" "}

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

          />
        }