Question

我有一个使用react-navigation的React Native应用程序。在我的一个屏幕中，我使用相机来读取QR码，但是我必须使用setState（{camera：false}）来防止多次加载QR码。通常，它有效。即使在从主菜单重新输入页面后也是如此。

麻烦在于用户按下＆＃39;＆lt;＆＃39;按钮（iOS /在标题中），他应该用相机重新进入页面。我无法找到应该执行setState（{camera：true}）的函数。没有react-navigation，就有标准生命周期（componentWillMount，...），但在这种情况下，我无法找到放置代码的位置，因此我可以检测到该页面已重新输入。

我知道https://github.com/react-community/react-navigation/issues/51但我仍然错过了解决方案。

Answer 1

我有一个类似的问题，我有屏幕A打开一个屏幕B，我想捕捉我将从B回到屏幕A的事件。

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

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

然后我需要捕获屏幕B上的结束事件，它基本上是componentWillUnmount：

在ScreenB组件类中：

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

Answer 2

目前，看起来没有一个优雅的反应导航解决方案。

最好的选择是使用 onNavigationStateChange （在Screen Tracking页面找到）。在此函数中，我们可以检测到我们将离开指定的选项卡。如果您计划设置存储在redux中的数据，请注意您将更改state =＆gt;页面将再次呈现，标签不会更改。您必须手动更改选项卡（例如，通过 initialRouteName ）

Answer 3

由于人们已经回答了正确的React Native方法，我想我可能会提出这样的建议，这些问题让我节省了数千小时......

为什么不使用REDUX并设置一个全局可访问的商店变量来解决这个问题？如果您使用REDUX，您只需设置一次，相机关闭，全局应用程序状态不仅会记住这一点，而且还允许您收听商店的每个组件，现在知道相机不会是在这个屏幕上开火。当应用程序终止或甚至设置此值时，如果需要，您可以保持AsyncStorage，然后在应用程序打开并加载后检索它。

这种方法非常需要，因为它不需要干扰RN生命周期的复杂性。一旦您开始必须在特定时间更新或更改封装的组件状态变量，或强制它更新而不希望渲染发生，或强制它在奇怪的生命周期事件期间更新......您知道您采取了错误的方法。至少这是我对自己在RN工作中所学到的知识。

反应导航和组件生命周期

3 个答案: