Expo Camera открывается только один раз с помощью React Navigation

У меня была проблема.

Этот код решил это для меня:

import { withNavigationFocus } from 'react-navigation'

render() {
    const { isFocused } = this.props
    return (
       <View>
         { isFocused && <RNCamera  ... />  }
       </View
     )
}


export default withNavigationFocus(Camera)

Я заставил его работать, используя NavigationEvents, чтобы определить, находится ли вкладка в фокусе, и оттуда смонтировать и отключить камеру. Это также освобождает камеру, если вам нужно использовать ее на другом экране. Вот что я бы сделал в вашем примере:

    import { NavigationEvents } from 'react-navigation';
    ...
    class CameraView extends React.Component {
      constructor(props) {
       super(props) 
       this.state = {
         hasCameraPermission: null,
         type: Camera.Constants.Type.back,
         isFocused:true
       };
      }

      ...

      render(){
       //...your existing if's
       } if (this.state.isFocused === false){
         return (
              <NavigationEvents
                    onWillFocus = {payload => {
                        //console.info("will focus", payload);
                        this.setState({isFocused:true})
                    }}
                    onDidBlur = {payload => {
                        //console.info('did leave',payload)
                        this.setState({isFocused:false})
                    }}
                />
         )
       }
       } else {
          return (
           <View style = {{ flex: 1 }}>
            <Camera style = {{ flex: 1 }} type = {this.state.type}>
               <NavigationEvents
                    onWillFocus = {payload => {
                        //console.info("will focus", payload);
                        this.setState({isFocused:true})
                    }}
                    onDidBlur = {payload => {
                        //console.info('did leave',payload)
                        this.setState({isFocused:false})
                    }}
                />
          //...the rest of your camera code
      }

Надеюсь, это сработает и для вас

Для этого вам необходимо:

1.

import { NavigationEvents } from 'react-navigation';

state = { loaded: true }

render() {
    const { loaded } = this.state;
        return (
            <View style = {styles.container}>
            <NavigationEvents
             onWillFocus = {payload => this.setState({loaded: true})}
             onDidBlur = {payload => this.setState({loaded: false})}/>
            <View style = {styles.cameraArea}>
            {loaded && (
                <Camera
                 type = {Camera.Constants.Type.back}
                 ref = {ref => {
                     this.camera = ref;
                }}
              />
              )}          
            </View>

Идея состоит в том, чтобы скрыть этот вид камеры (onDidBlur-> loaded: false), а затем, когда вы вернетесь (запускается onWillFocus и изменяется загружено на true). Когда вызывается функция render (), она снова показывает <Camera />. Если у вас есть вопросы, не стесняйтесь спросить.

С React Navigation 5.x

import { useIsFocused } from '@react-navigation/native';

export const CameraView = (props) => {
    const isFocused = useIsFocused();
    return (
       <View>
         { isFocused && <RNCamera  />  }
       </View>
     )
}

Если вы используете RN Expo с React Navigation - Tab Navigator.

Тогда просто используйте unmountOnBlur - unmountOnBlur Документация

Это заставит камеру отключаться при каждом изменении фокуса навигации.

Решил с помощью крючка useIsFocused от react-navigation/native. Я тестировал его на Android, iOS и в Интернете

import { useIsFocused } from '@react-navigation/native';

...

const isFocused = useIsFocused();

...

return (
    isFocused && (
      <Camera
        ref = {(ref) => {
          camera = ref;
        }}
        onBarCodeScanned = {scanned ? undefined : handleBarCodeScanned}
        style = {StyleSheet.absoluteFillObject}
      />
    )
  );

У меня это работает. (Навигация 5.x) если вы используете другой экран для КАМЕРЫ, вы можете легко отключить экран при переходе на другой.

Reason of this behavior : Only one Camera preview can be active at any given time. If you have multiple screens in your app, you should unmount Camera components whenever a screen is unfocused.

<Stack.Screen name = "camera" component = {CameraScreen} options = {{unmountOnBlur: true}}/>
</Stack.Navigator>

Ссылка на документацию: https://docs.expo.io/versions/latest/sdk/camera/

Спасибо.