相机冻结：如何重新初始化相机组件？

Question

使用相机拍照，然后导航到另一个页面，其中有一个后退按钮，在单击事件时，我再次导航到相机，但这次相机冻结，但我可以单击另一张照片。

观察到，如果导航流是相机 => 其他组件（例如相机单击图片视图）=> 相机，则相机会冻结。

如果导航流是其他组件（例如，除相机之外的任何组件）=> 相机，则不会发生相机冻结。可能需要关闭相机，然后才应该进行导航。

包线程：react-native-camera-kit

Answer 1

我已经解决了这个问题，但经过在互联网上的多次搜索后，我使用它解决了它componentDidMount

在选项卡之间切换时，React-navigation 不会卸载组件。因此，当您离开并返回带有相机组件的屏幕时，它只会是黑色视图。因此，一个好的解决方案是使用componentDidMount并添加两个侦听器willFocus并willBlur帮助您安装和卸载视图。

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