Verwenden Sie die React-Native-Navigation, aber keinen Stack?

Question

Ich habe also kürzlich an React-Native gearbeitet und große Fortschritte gemacht. Ich weiß, wie man React-Navigation verwendet, sei es @react-navigation/native-stack oder @react-navigation/bottom-tabs. Es gibt keine Probleme bei der Verwendung dieser.

Aber um die von mir verwendeten Tools besser zu verstehen, habe ich eine Frage:

Wenn Sie den Navigator bestimmungsgemäß verwenden, erhalten Sie am Ende mehrere Bildschirme, die übereinander „gestapelt“ sind oder auseinandergezogen werden, wenn Sie zum vorherigen Bildschirm zurückkehren. Ich suche oft nach Design-Inspirationen bei Twitter und musste feststellen, dass die Webanwendung dieses Unternehmens nicht diesen „gestapelten“ Ansatz verwendet.

Der Einfachheit halber spreche ich hier nur von der Webseite, aber unter iOS ist es im Grunde dasselbe, die Bildschirme werden gestapelt. (Natürlich kann ich nicht sehen, ob die Twitter-App nicht so stapelbar ist wie die Web-App, aber was auch immer).

Bei ordnungsgemäßer Verwendung des Navigators wie dokumentiert

<div style="z-index: 0; display: flex;">
   //Bildschirminhalt
</div>
<div style="z-index: -1; display: none;">
   //Inhalt von Bildschirm 2
</div>
<div style="z-index: -1; display: none;">
   //Inhalt von Bildschirm 3
</div>

Alle Bildschirmkomponenten werden also technisch gerendert, nur der ausgewählte Bildschirm wird nicht ausgeblendet.

Ich möchte immer nur einen Bildschirm rendern, alle anderen Bildschirme werden nicht ausgeblendet. Wenn der Benutzer zu einem anderen Bildschirm „navigiert“, möchte ich, dass sich der Inhalt dieses einen Bildschirms ändert, je nachdem, welche Seite er besucht.

Twitter funktioniert so, dass es einen

-Container gibt, der den Inhalt der Seite enthält und je nachdem, auf welcher Seite sich der Benutzer befindet, den Inhalt ändert Behälter entsprechend Inhalt. Twitter verwendet React-Native, daher muss es eine Möglichkeit geben, dies zu tun. Ich wünschte, es gäbe zumindest eine halboffizielle Möglichkeit, dies zu tun, und nicht eine faktische Möglichkeit, dies zu tun. Ich habe in der Dokumentation von „React-Navigation“ gesucht, aber keine ähnliche Beschreibung gefunden.

Zusammenfassung: React-Navigation „stapelt“ Bildschirme so, dass sie gleichzeitig existieren, aber nur der Bildschirm „oben“ im Stapel wird angezeigt. Ich suche nach einer Möglichkeit, nur einen Bildschirm zu verwenden und den Inhalt dieses Bildschirms basierend auf der Seite zu ändern, zu der der Benutzer navigiert.

Ich habe die Dokumentation für React-Navigation durchsucht und versucht, eine Beschreibung des Verhaltens zu finden, die meiner Suche ähnelt, habe aber nichts gefunden. Wenn es eine bessere React-Navigationsbibliothek gibt, die mehr von dem kann, was ich beschrieben habe, würde ich gerne darauf hinweisen.

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等库提供的内置导航功能。