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

 //Bildschirminhalt 
 
 //Inhalt von Bildschirm 2 
 
 //Inhalt von Bildschirm 3 

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.

const NavigationContainer = () => { const [currentPage, setCurrentPage] = useState('Home'); // 默认页面 const navigateTo = (page) => { setCurrentPage(page); }; const renderContent = () => { switch (currentPage) { case 'Home': return ; case 'Profile': return ; // 添加更多不同页面的情况 default: return null; } }; return (   {renderContent()}  ); }; export default NavigationContainer;

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