不使用堆栈的 React-Native 导航？

Question

所以我最近一直在深入研究 React-Native，并取得了很大的进展。我知道如何使用 React-Navigation 的大部分内容，无论是

@react-navigation/native-stack

还是

@react-navigation/bottom-tabs

。按预期使用这些确实没有问题。

但是为了更好地理解我提供的工具，我确实有这个问题：

按预期使用导航器时，您最终会看到多个屏幕“堆叠”在彼此之上，或者在“返回”到最后一个屏幕时被拉开。我经常在 Twitter 上寻找各种设计灵感，但我不禁注意到他们的网络应用程序并没有使用这种“堆叠”方法。

为了简单起见，我在这里只讨论 Web 方面的内容，但 iOS 上的情况几乎相同，屏幕堆栈。 （显然我无权查看 Twitter 应用程序是否像网络应用程序一样，因为它不堆叠，但无论如何）。

按照文档正确使用导航器时

<div style="z-index: 0; display: flex;">
   //Screen Content
</div>
<div style="z-index: -1; display: none;">
   //Screen2 Content
</div>
<div style="z-index: -1; display: none;">
   //Screen3 Content
</div>

因此，所有屏幕组件都在技术上进行了渲染，无论选择哪一个，都是唯一没有隐藏的。

我想做的基本上是始终渲染 1 个屏幕，而不隐藏其他屏幕。当用户“导航”到不同的屏幕时，我希望将 1 个屏幕的内容更改为他们要去的任何页面。

Twitter 的工作方式是他们有一个

<main></main>

容器来保存页面的内容，并且根据用户所在的页面，该容器中的内容会相应地发生变化。 Twitter 确实使用了 React-Native，所以必须有一种方法来做到这一点。我想我希望有某种至少是半官方的方式来做到这一点，而不是实际上破解一种方式来让它像那样工作。我已经浏览了“React-Navigation”的文档，但还没有真正看到任何描述类似这样的内容。

tldr： React-Navigation “堆叠”屏幕，它们都同时存在，但只显示堆栈“顶部”的屏幕。我正在寻找一种仅使用 1 个屏幕来浏览应用程序的方法，并且该 1 个屏幕中的内容会根据用户导航到的页面而变化。

我浏览了 React-Navigation 文档，试图找到任何描述行为的东西，有点像我正在寻找的东西，但没有找到任何东西。我期望找到一种使用 1 个主屏幕浏览应用程序的方法，该主屏幕仅包含用户所在页面的页面内容。

如果有一个更好的 React 导航库，可以做更像我所描述的事情，我很乐意指出这个方向。

Answer 1

您想要做的更多是单页应用程序架构，其中您有一个主容器来保存基于导航的不断变化的内容，但是，React Navigation 旨在堆叠屏幕并在它们之间导航。

解决方案

您可以创建一个自定义导航组件，我们称其为

NavigationContainer

，用于保存更改的内容，该组件将管理当前正在显示的页面并相应地呈现内容，如下所示：

const NavigationContainer = () => {
  const [currentPage, setCurrentPage] = useState('Home'); // Default page

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

  const renderContent = () => {
    switch (currentPage) {
      case 'Home':
        return <HomeContent />;
      case 'Profile':
        return <ProfileContent />;
      // Add more cases for different pages
      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>
      // Add more buttons/links for other pages 
    </View>
  );
};

export default CustomNavBar;

限制

您应该实现深度链接以获得更好的基于 URL 的导航，这将允许用户使用 URL 直接导航到特定页面，此外，如果需要，您还需要手动处理路由、动画和转换。
您可能还会丢失一些React Navigation 等库提供的内置导航功能。