react-navigation和組件生命週期

我有一個使用react-navigation的React Native應用程序。在我的一個屏幕中，我使用相機讀取QR碼，但是我必須使用setState（{camera：false}）來防止多次加載QR碼。通常，它工作。即使從主菜單重新輸入頁面之後。react-navigation和組件生命週期

問題出在用戶按'<'按鈕（iOS /在標題中），他應該用攝像頭重新進入頁面。我無法找到一個我應該做setState（{camera：true}）的函數。沒有反應導航，就有標準的生命週期（componentWillMount，...），但在這種情況下，我無法找到將代碼放在哪裏，因此我可以檢測到該頁面已被重新輸入。

我知道https://github.com/react-community/react-navigation/issues/51但我仍然錯過了解決方案。

來源

2017-05-17 Marek Grác

你找到了一個解決方案？ – Marklar

我有一個有點類似的問題在那裏我有一個屏幕打開屏幕B和我想捕捉事件在那裏我會回來的屏幕A從B中

我最好的猜測是，從發送回調通過導航功能屏幕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() 
}

來源

2017-05-17 21:58:43 TheFuquan

我真的很喜歡這個想法，但我沒有找到一種方法來運行onClose（）方法。 render（），componentWillMount（）以遞歸調用結束。 –

像上面提到的那樣，你在屏幕B的componentWillUnmount內運行oncolse，你沒有得到什麼？ – TheFuquan

隨着react-navigation和componentWillUnmount在離開場景時不被調用，但它在後臺保持打開狀態。在github問題中，他們試圖找到解決這個問題的方法（目前有106條評論）。 –

目前，它似乎沒有一個反應導航優雅的解決方案。

最好的選擇是使用onNavigationStateChange（找到在Screen Tracking頁）。在這個函數中，我們可以檢測到我們正在離開指定的選項卡。如果您打算設置以redux存儲的數據，請注意您將更改狀態=>頁面將再次呈現，並且選項卡不會更改。你必須處理手動更改標籤（例如，通過initialRouteName）

來源

2017-08-14 13:45:15

「react-navigation」是一件垃圾，請避開它的人。我浪費了無數天的時間。 –

它尚未準備好生產，但它改善了導航功能。我以前使用的第三方解決方案可能處於類似的狀態。反應導航將在幾個月內默認。 –

由於人們已經回答正確的做出反應，我想我可能使救了我數千小時使用這些類型的問題的建議本地唯一的方法..

爲什麼不使用REDUX並設置一個全局可訪問的存儲變量來解決這個問題？如果您使用的是REDUX，您可以簡單地設置一次，即相機關閉，全局應用程序狀態不僅會記住您的這一點，而且還允許您收聽店內的每個組件，現在知道相機不會是在這個屏幕上發射。當應用程序被終止或甚至當您設置此值時，如果需要，您可以堅持AsyncStorage，然後在應用程序打開並加載時檢索它。

這種方法將非常有用，因爲它不需要干擾RN生命週期的複雜性。一旦開始必須在特定時間更新或更改封裝組件狀態變量，或強制更新而不希望渲染髮生，或迫使它在奇怪的生命週期事件期間更新......您知道您採取了錯誤的方法。至少這就是我在RN中學到的自己的工作。

來源

2017-08-22 13:49:29 GoreDefex

我同意@GoreDefex（upvoted）。 Redux可能是你最好的選擇。有一點點的學習曲線，但是一旦你連接到你的應用程序，它使狀態管理變得更容易。

特別是如果你將開始遇到嵌套的航海家，如堆內導航等抽屜導航

來源

2018-02-26 21:15:56 skrusetvt

react-navigation和組件生命週期

回答

相關問題