Камера не работает после смены компонента в React native

Question

Я новичок ie в React native. Я пытаюсь создать приложение, которое использует камеру. У меня есть два компонента, компонент камеры и компонент настроек. Я могу переключаться между компонентами в любое время.

Приложение по умолчанию открывается на камере. Но когда я выбираю компонент настроек и возвращаюсь к камере, он остается черным.

Это мой компонент камеры:

И это мой компонент камеры после того, как я переключаюсь между двумя моими компонентами:

Исходный код приложения. js

  import * as React from 'react';
  import { NavigationContainer } from '@react-navigation/native';
  import { createStackNavigator } from '@react-navigation/stack';
  import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
  import FridgeScreen from './components/fridgeScreen.js';
  import SettingsScreen from './components/settingsScreen.js';
  import ScannerScreen from './components/scannerScreen.js';
  import { Ionicons } from '@expo/vector-icons';


  const Stack = createStackNavigator();
  const Tab = createBottomTabNavigator();


  export default class App extends React.Component {
      render() {
          return (

        <NavigationContainer>
          <Tab.Navigator
                  screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
              let iconName;

              if (route.name === 'ScannerScreen') {
                iconName = 'md-qr-scanner';
              } else if (route.name === 'Settings') {
                iconName = 'md-settings';
              }

              // You can return any component that you like here!
              return <Ionicons name={iconName} size={size} color={color} />;
            },
          })}
          tabBarOptions={{
            activeTintColor: 'tomato',
            inactiveTintColor: 'gray',
          }}
            >
            <Tab.Screen name="ScannerScreen" component={ScannerScreen} />
            <Tab.Screen name="Settings" component={SettingsScreen} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }
  }

Камера. js компонент

  import React from 'react';
  import { View, Text } from 'react-native';
  import * as Permissions from 'expo-permissions'
  import {Camera} from 'expo-camera'

  export default class CameraPage extends React.Component {

      Camera = null
      state = {
          hasCameraPermission: null,
      };

      async componentDidMount() {
          const camera = await Permissions.askAsync(Permissions.CAMERA);
          const audio = await Permissions.askAsync(Permissions.AUDIO_RECORDING);
          const hasCameraPermission = (camera.status === 'granted' && audio.status === 'granted');

          this.setState({ hasCameraPermission });
      };

      render() {
          const { hasCameraPermission } = this.state;

          if (hasCameraPermission === null) {
              return <Text>Access to camera has been denied.</Text>;
          } else if (hasCameraPermission === false) {
              return <Text>Access to camera has been denied.</Text>;
          }

          return (
            <View style={{ flex: 1 }}>
              <Camera style={{ flex: 1 }} type={this.state.cameraType}>

              </Camera>
            </View>
          );
      };
  };

Настройки. js компонент

  import React, {PropTypes} from 'react';
  import { Text } from "react-native";

  export default class SettingsScreen extends React.Component {
    render() {
      return (<Text>SettingsScreen</Text>);
    }
  }

Есть идеи, как это исправить?