Using React-Native navigation but not stack?

Question

So I have been working on React-Native recently and have made great progress. I know how to use React-Navigation, whether it's @react-navigation/native-stack or @react-navigation/bottom-tabs. There are no problems when using these.

But to better understand the tools I use, I have a question:

When using the Navigator as intended, you end up with multiple screens that are "stacked" on top of each other, or are pulled apart when returning to the previous screen. I often look to Twitter for design inspiration, and I couldn't help but notice that their web application doesn't use this "stacked" approach.

For the sake of simplicity, I'm only talking about the web side here, but it's basically the same on iOS, the screens stack. (Obviously I can't see if the Twitter app doesn't stack like the web app does, but whatever).

When using the Navigator in the correct manner as documented

<div style="z-index: 0; display: flex;">
   //Screen content
</div>
<div style="z-index: -1; display: none;">
   //Contents of screen 2
</div>
<div style="z-index: -1; display: none;">
   //Contents of screen 3
</div>

So, all screen components are technically rendered, only the selected screen is not hidden.

What I want to do is always render only one screen, no other screens are hidden. As the user "navigates" to a different screen, I want the content of this one screen to change depending on which page they are going to.

The way Twitter works is they have a

container which contains the content of the page and depending on which page the user is on, changes the container accordingly Content. Twitter does use React-Native, so there must be a way to do this. I wish there was at least a semi-official way to do this, rather than a de facto way to do it. I've searched in the documentation of 'React-Navigation' but found no similar description.

In summary: React-Navigation "stacks" screens so that they exist simultaneously, but only the screen "on top" of the stack is displayed. I'm looking for a way to use only one screen and have that screen's content change based on the page the user navigates to.

I've searched through the documentation for React-Navigation, trying to find a description of the behavior similar to what I'm looking for, but haven't found anything. If there's a better React navigation library that does more of what I've described, I'd love to point it out.

Answer 1

What you want to do is more suited to a single page application architecture where you have a single main container that holds changing content based on navigation, however, React Navigation is designed for stacking screens and navigating between them of.

solution

You can create a custom navigation component, let's call it NavigationContainer, which holds the changing content. This component will manage the currently displayed page and render the content accordingly, similar to this:

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 is another component that contains buttons or links for each page.
When the button/link is pressed it will call the navigateTo function which is received as props from its parent component i.e. NavigationContainer to update the currentPage# there ##state:

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;

limit

You should implement deep linking for better URL-based navigation, which will allow users to navigate directly to a specific page using a URL. Additionally, you will need to manually handle routing, animations, and transitions if needed.

You may also lose some of the built-in navigation functionality provided by libraries like React Navigation.