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

Question

所以我最近一直在研究React-Native，并取得了很大的进展。我知道如何使用React-Navigation，无论是@react-navigation/native-stack还是@react-navigation/bottom-tabs。在使用这些时，没有什么问题。

但是为了更好地理解我所使用的工具，我有一个问题：

当按照预期使用导航器时，最终会得到多个屏幕，它们会在彼此之上“堆叠”，或者在返回到上一个屏幕时被拉开。我经常参考Twitter的设计灵感，我不禁注意到他们的Web应用程序并没有使用这种“堆叠”的方法。

为了简单起见，我只在这里谈论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等库提供的内置导航功能。