Vous utilisez la navigation React-Native mais pas la pile ?

Question

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 @react-navigation/native-stack ou @react-navigation/bottom-tabs. Il n'y a aucun problème lors de leur utilisation.

Mais pour mieux comprendre les outils que j'utilise, j'ai une question :

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 ».

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).

Lors de l'utilisation correcte du navigateur, comme indiqué

   //Contenu de l'écran


   //Contenu de l'écran 2


   //Contenu de l'écran 3

Ainsi, tous les composants de l'écran sont techniquement rendus, seul l'écran sélectionné n'est pas masqué. 
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. 
La façon dont Twitter fonctionne est qu'il dispose d'un conteneur 
 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. 

En résumé : 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. 
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. 

Answer 1

Ce que vous souhaitez faire est plus adapté à une architecture d'application d'une seule page dans laquelle vous disposez d'un seul conteneur principal contenant un contenu changeant en fonction de la navigation. Cependant, React Navigation est conçu pour empiler les écrans et naviguer entre eux.

Solution

Vous pouvez créer un composant de navigation personnalisé, appelons-le NavigationContainer, qui contient le contenu changeant. Ce composant gérera la page actuellement affichée et restituera le contenu en conséquence, similaire à ceci :

.

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 est un autre composant qui contient des boutons ou des liens pour chaque page. CustomNavBar是另一个包含每个页面按钮或链接的组件。
当按下按钮/链接时，它将调用navigateTo函数，该函数从其父组件即NavigationContainer接收为props，以更新那里的currentPageLorsqu'un bouton/lien est enfoncé, il appelle la fonction navigateTo qui est reçue comme accessoire de son composant parent, c'est-à-dire

pour y mettre à jour l'état 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;

Restrictions

Vous devez mettre en œuvre des liens profonds pour une meilleure navigation basée sur les URL, qui permettront aux utilisateurs de naviguer directement vers une page spécifique à l'aide d'une URL. De plus, vous devrez gérer manuellement le routage, les animations et les transitions si nécessaire.

Vous risquez également de perdre certaines des fonctionnalités de navigation intégrées fournies par des bibliothèques telles que React Navigation. 🎜