反应导航和组件生命周期 [英] react-navigation and component lifecycle

问题描述

我有一个使用 react-navigation 的 React Native 应用程序.在我的一个屏幕中，我正在使用相机读取二维码，但我必须使用 setState({camera: false}) 来防止多次加载二维码.通常，它有效.即使从主菜单重新进入页面.

I have a React Native application that uses react-navigation. In one of my screen, I'm using camera to read the QR code what works fine but I have to use setState({camera: false}) to prevent loading of QR code multiple times. Usually, it works. Even after re-entering page from main menu.

问题是当用户按下<"按钮(iOS/在标题中)，他应该使用相机重新进入页面.我找不到应该执行 setState({camera: true}) 的函数.没有反应导航，有标准生命周期(componentWillMount，...)，但在这种情况下，我无法找到放置代码的位置，因此我可以检测到该页面已重新进入.

Trouble is when user press '<' button (iOS / in the header) and he should re-enter page with camera. I'm not able to find a function where I should do setState({camera: true}). Without react-navigation, there is standard lifecycle (componentWillMount, ...) but in this case I'm not able to find out where to put my code, so I can detect that page was re-entered.

我知道 https://github.com/react-community/react-navigation/issues/51 但我仍然想念解决方案.

I'm aware of https://github.com/react-community/react-navigation/issues/51 but I still miss the solution.

推荐答案

我遇到了一个有点类似的问题，我让屏幕 A 打开屏幕 B，我想捕获从 B 返回到屏幕 A 的事件.

I had a somewhat similar issue where i had screen A opens a screen B and i wanted to capture the event where i would come back to screen A from B.

我最好的猜测是通过导航功能从屏幕 A 向屏幕 B 发送回调:

My best guess was to send a callback from Screen A to B through the navigate function:

this.props.navigation.navigate("ScreenB",{
   onClose : ()=>{
      // update your state to open back the camera
   }
})

然后我需要在屏幕 B 上捕获关闭事件，这基本上是 componentWillUnmount:

And then i needed to capture the closing event on Screen B, which basically was componentWillUnmount:

在 ScreenB 组件类中:

In ScreenB component class :

componentWillUnmount(){
   this.props.navigation.state.params.onClose()
}

这篇关于反应导航和组件生命周期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！