相机冻结:如何重新初始化相机组件?

时间:2018-04-14 09:03:22

标签: react-native-android react-native-camera

使用相机拍摄照片,然后导航到另一个有后退按钮的页面,点击事件我再次导航到相机,但这次相机冻结但我可以点击另一张照片。

如果导航流是摄像头,则观察到摄像头冻结=>其他组件(例如,相机点击图片视图)=>相机。

如果导航流是其他组件(例如,除了摄像机之外的任何东西)=>相机,然后相机冻结没有发生。可能需要杀死相机的东西,然后导航应该发生。

包线程:react-native-camera-kit

2 个答案:

答案 0 :(得分:0)

我已经解决了这个问题,但是在互联网上进行了几次搜索后,我使用componentDidMount

解决了这个问题

在选项卡之间切换时,反应导航不会卸载组件。因此,当您离开并返回带有摄像头组件的屏幕时,它将只是黑色视图。因此,一个好的解决方案是使用componentDidMount并添加两个侦听器willFocuswillBlur来帮助您安装和卸载视图。

componentDidMount() {
   const { navigation } = this.props;
   navigation.addListener('willFocus', () =>
     this.setState({ focusedScreen: true })
   );
   navigation.addListener('willBlur', () =>
     this.setState({ focusedScreen: false })
   );
 }




    render() {
        const { isPermitted, focusedScreen } = this.state;
        if (isPermitted === null) {
          return (<View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
            <Text>Error</Text>
          </View>);
        } else if (isPermitted === false) {
          return (<View style={{flex:1, justifyContent:'center',alignItems:'center'}}>
          <ActivityIndicator size="large" style={{color:'blue', fontSize:30}} />
            <Text>No Acceas to camera</Text>
          </View>);
        } else if (focusedScreen){
          return ( <View>
            <FullPageLoader isVisible={this.state.isLoader} TextToShow={this.state.loaderText} />
            <CameraKitCameraScreen
            actions={{ leftButtonText: <Icon name='close' style={{color:'white',fontSize:30}}/>,rightButtonText: <Icon name='images' style={{color:'white',fontSize:40}}/> }}
            onBottomButtonPressed={event => this.onBottomButtonPressed(event)}
            ref= {(cam) => {
              this.camera = cam;
            }}
            flashImages={{
              on: require('./img/flashon.png'),
              off: require('./img/flashoff.png'),
              auto: require('./img/flashauto.png'),
            }}
            TopTitle={this.state.title}
            cameraFlipImage={require('./img/flip-camera.png')}
            captureButtonImage={require('./img/capture.png')}
            cameraOptions={{
              flashMode: 'auto',             // on/off/auto(default)
              focusMode: 'on',               // off/on(default)
              zoomMode: 'on',                // off/on(default)
              ratioOverlayColor: '#00000077'
            }}
            style={{height:'100%'}}
          />
          </View>);
        }else{
          return (<Text>Camera Error</Text>);
        }
      }

参考:https://github.com/react-native-community/react-native-camera/blob/master/docs/react-navigation.md

答案 1 :(得分:0)

对于那些使用Expo和React Native功能组件的人来说,这变得更加复杂。

对于那些初到的人来说,问题在于React Native屏幕不会在休假时破坏相机。您可以创建多个摄像头屏幕,但是当您返回上一个摄像头屏幕时,预览似乎冻结,因为该屏幕上的摄像头永远不会重新初始化。

我的解决方案是创建一个摄像头并切换UI,以便有条件地在其周围渲染组件以适应UI的需求。

类似这样的东西:

import React, { useEffect, useState } from 'react';
import { StyleSheet, View, Button } from 'react-native';
import { Camera } from 'expo-camera';
import * as Permissions from 'expo-permissions';

export default function App() {

   const [hasCameraPermission, setHasCameraPermission] = useState(false);
   const [cameraMode1, setCameraMode1] = useState(true);

   const takePicture = async () => {
        if (cameraMode1) {
           alert("Picture mode 1");
           setCameraMode1(false);
        } else {
           alert("Picture mode 2");
           setCameraMode1(true);
        }
    }

    useEffect(() => {
        async function getCameraStatus() {
            const { status } = await Permissions.askAsync(Permissions.CAMERA);
            setHasCameraPermission(status == 'granted');
        }
        getCameraStatus();
    }, [hasCameraPermission]);

    return (
      <View style={{ flex: 1}}>
        <Camera
              style={[StyleSheet.absoluteFillObject]}
        />
        {cameraMode1 ?
        <Button
            title="Camera Mode 1"
            onPress={() => { takePicture() }}
        />
        :
        <Button
            title="Camera Mode 2"
            onPress={() => { takePicture() }}
        />
        }
       </View>
    );
}

您可以Test out this code on Expo Snack