使用React-Native導航但不使用堆疊？

Question

所以我最近一直在研究React-Native，並且取得了很大的進展。我知道如何使用React-Navigation，無論是@react-navigation/native-stack還是@react-navigation/bottom-tabs。在使用這些時，沒有什麼問題。

但為了更能理解我所使用的工具，我有一個問題：

當按照預期使用導航器時，最終會得到多個螢幕，它們會在彼此之上“堆疊”，或者在返回到上一個螢幕時被拉開。我經常參考Twitter的設計靈感，我不禁注意到他們的網路應用程式並沒有使用這種「堆疊」的方法。

為了簡單起見，我只在這裡談論Web端的情況，但在iOS上基本上是一樣的，螢幕會堆疊。 （顯然，我無法查看Twitter應用程式是否像Web應用程式那樣不堆疊，但無論如何）。

按照文件中的正確方式使用導航器時

<div style="z-index: 0; display: flex;">
   //螢幕內容
</div>
<div style="z-index: -1; display: none;">
   //螢幕2的內容
</div>
<div style="z-index: -1; display: none;">
   //螢幕3的內容
</div>

所以，所有螢幕元件在技術上都被渲染，只有選取的畫面不會被隱藏。

我想要做的是始終只渲染一個螢幕，沒有其他螢幕被隱藏。當使用者「導航」到不同的螢幕時，我希望這一個螢幕的內容會根據他們要去的頁面而改變。

Twitter的工作方式是他們有

容器，其中包含頁面的內容，並根據使用者所在的頁面，相應地更改容器中的內容。 Twitter確實使用React-Native，所以肯定有一種方法可以做到這一點。我希望有一種至少半官方的方法來實現這個，而不是透過一種實際的方式來實現。我已經在'React-Navigation'的文檔中搜尋過，但沒有找到類似的描述。

總之：React-Navigation「堆疊」螢幕，它們同時存在，但只有位於堆疊「頂部」的螢幕會顯示。我正在尋找一種只使用一個螢幕並且該螢幕的內容根據用戶導航到的頁面而改變的方法。

我已經在React-Navigation的文檔中搜尋過，試圖找到類似我所尋找的行為的描述，但沒有找到任何內容。如果有更好的React導航庫可以做到我所描述的更多功能，我希望能指點一下。

Answer 1

你想做的更適合單頁應用程式架構，其中你有一個單一的主容器，根據導航來持有變化的內容，然而，React Navigation是設計用於堆疊螢幕並在它們之間導航的。

解決方案

你可以建立一個自訂的導航元件，我們稱之為NavigationContainer，它持有變化的內容，這個元件將管理目前顯示的頁面並相應地渲染內容，類似於這樣：

const NavigationContainer = () => {
  const [currentPage, setCurrentPage] = useState('Home'); // 默认页面

  const navigateTo = (page) => {
    setCurrentPage(page);
  };

  const renderContent = () => {
    switch (currentPage) {
      case 'Home':
        return <HomeContent />;
      case 'Profile':
        return <ProfileContent />;
      // 添加更多不同页面的情况
      default:
        return null;
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <CustomNavBar navigateTo={navigateTo} />
      {renderContent()}
    </View>
  );
};

export default NavigationContainer;

CustomNavBar是另一個包含每個頁面按鈕或連結的元件。
當按下按鈕/連結時，它將呼叫navigateTo函數，該函數從其父元件即NavigationContainer接收為props，以更新那裡的currentPage狀態：

const CustomNavBar = ({ navigateTo }) => {
  return (
    <View>
      <TouchableOpacity onPress={() => navigateTo('Home')}>
        <Text>Home</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => navigateTo('Profile')}>
        <Text>Profile</Text>
      </TouchableOpacity>
      // 添加更多按钮/链接以供其他页面使用
    </View>
  );
};

export default CustomNavBar;

限制

你應該實現深連結以實現更好的基於URL的導航，這將允許用戶使用URL直接導航到特定頁面，此外，如果需要的話，你需要手動處理路由、動畫和過渡。
你可能還會失去一些由React Navigation等函式庫提供的內建導航功能。