<p>J'ai donc travaillé sur React-Native récemment et j'ai fait de grands progrès. Je sais comment utiliser React-Navigation, que ce soit <code>@react-navigation/native-stack</code> ou <code>@react-navigation/bottom-tabs</code>. Il n'y a aucun problème lors de leur utilisation. </p> <p>Mais pour mieux comprendre les outils que j'utilise, j'ai une question : </p> <p>Lorsque vous utilisez le navigateur comme prévu, vous vous retrouvez avec plusieurs écrans « empilés » les uns sur les autres ou séparés lors du retour à l'écran précédent. Je me tourne souvent vers Twitter pour m'inspirer en matière de conception et je n'ai pas pu m'empêcher de remarquer que leur application Web n'utilise pas cette approche « empilée ». </p> <p>Par souci de simplicité, je ne parle ici que du côté web, mais c'est fondamentalement pareil sur iOS, les écrans s'empileront. (Évidemment, je ne vois pas si l'application Twitter ne s'empile pas comme le fait l'application Web, mais peu importe). </p> <p><strong>Lors de l'utilisation correcte du navigateur, comme indiqué</strong></p> <pre class="brush:php;toolbar:false;"><div style="z-index: 0; display: flex;"> //Contenu de l'écran </div> <div style="z-index : -1 ; affichage : aucun ;"> //Contenu de l'écran 2 </div> <div style="z-index : -1 ; affichage : aucun ;"> //Contenu de l'écran 3 </div></pré> <p>Ainsi, tous les composants de l'écran sont techniquement rendus, seul l'écran sélectionné n'est pas masqué. </p> <p>Ce que je veux faire, c'est toujours afficher un seul écran, aucun autre écran n'est masqué. Lorsque l'utilisateur "navigue" vers un écran différent, je souhaite que le contenu de cet écran change en fonction de la page vers laquelle il se dirige. </p> <p>La façon dont Twitter fonctionne est qu'il dispose d'un conteneur <code><main></main></code> qui contient le contenu de la page et, en fonction de la page sur laquelle se trouve l'utilisateur, modifie le conteneur en conséquence Contenu. Twitter utilise React-Native, il doit donc y avoir un moyen de le faire. J’aurais aimé qu’il y ait au moins une manière semi-officielle de le faire, plutôt qu’une manière de facto de le faire. J'ai cherché dans la documentation de « React-Navigation » mais je n'ai trouvé aucune description similaire. </p> <p><strong>En résumé : </strong>React-Navigation "empile" les écrans pour qu'ils existent simultanément, mais seul l'écran "au-dessus" de la pile est affiché. Je cherche un moyen d'utiliser un seul écran et de modifier le contenu de cet écran en fonction de la page vers laquelle l'utilisateur accède. </p> <p>J'ai parcouru la documentation de React-Navigation, en essayant de trouver une description du comportement similaire à ce que je recherche, mais je n'ai rien trouvé. S'il existe une meilleure bibliothèque de navigation React qui fait plus de ce que j'ai décrit, j'aimerais le souligner. </p>

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;