如何在 React Native 屏幕之間共享狀態？

Question

我正在嘗試使用 React Native 和 React 導航構建一個應用程序，這樣在一個屏幕中更改某些內容也會在另一個屏幕中更改它。

到目前為止，我發現能夠在兩個屏幕之間同步數據的唯一方法是使用帶有onPress={() => navigate('OtherScreen', this.state)} 。 這有兩個問題。 首先，它僅適用於我明確調用導航的地方 - 當我滑動以更改屏幕時，它不會傳輸數據。 但大多數情況下，這似乎與 React 哲學背道而馳，數據應該通過渲染調用從模型中提取，而不是一個渲染方法將數據推送到另一個組件中。

這已經完全難倒我了。 我當前的“解決方案”是將我的整個應用程序編寫在一個文件中，以便所有內容都在同一范圍內，並且我可以使用全局變量來存儲全局狀態。

我不可能是第一個遇到這個問題的人，我發現很難想象 react-native 沒有任何內置方法來定義應用程序范圍的數據存儲。

是否有在 react-native 中全局共享數據的標准模式？

如何在兩個屏幕之間同步數據？

Answer 1

您可以使用Context或Redux在容器（屏幕）或組件之間共享。

Context旨在共享可被視為 React 組件樹的“全局”數據，例如當前經過身份驗證的用戶、主題或首選語言。

Redux是 JavaScript 應用程序的可預測狀態容器。

Answer 2

我解決這個問題的經驗是：

a) 不要使用不允許您在導航功能中設置參數的選項卡視圖模板（或類似模板）。 通過這種方式，您可以在所有屏幕上傳遞所需的參數（狀態）。 （但隨后我需要編寫一些代碼來創建“標簽”，但這一點也不難，只需將它們作為具有絕對位置的視圖放在底部即可）

b) 在每個屏幕上，讀取當前時間，以便當您通過“導航”切換屏幕時，將此時間參數傳遞到下一個屏幕

c) 當新屏幕到達時，我使用了幾行代碼（在 componentDidUpdate 和 componentDidMount 中）來比較從上一個屏幕經過的時間到當前時間，如果它們不同，那么我將觸發一次更新一次需要更新的功能。

希望以上內容能給不想花額外時間學習/使用 Redux 的開發人員一些見解。

享受....

Answer 3

有兩種共享狀態。

1. 保持屏幕上的部分狀態發生變化，例如下鑽視圖以查看詳細信息。 您不需要更改子集屏幕上的狀態。 為了解決這個問題，將需要的數據作為參數發送並作為道具使用。 onPress={() => navigate('OtherScreen', this.state)}
2. 您需要更改其他屏幕上的狀態，例如購買屏幕上的多屏道具。 這樣你就需要使用Context或Redux （新的 redux-toolkit 是當前的標准，它比redux / react-redux容易得多）。

---

將 redux-cli 與導航一起使用時，請確保所有路由都在<Provider> ，以便您可以全局調用它。

初始化存儲：

return (
  <NavigationContainer>
    <Provider store={store}>
      <LoadingActivity />
      <Routes />
    </Provider>
  </NavigationContainer>
);