<p>So I have been working on React-Native recently and have made great progress. I know how to use React-Navigation, whether it's <code>@react-navigation/native-stack</code> or <code>@react-navigation/bottom-tabs</code>. There are no problems when using these. </p> <p>But to better understand the tools I use, I have a question: </p> <p>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. </p> <p>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). </p> <p><strong>When using the Navigator in the correct manner as documented</strong></p> <pre class="brush:php;toolbar:false;"><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></pre> <p>So, all screen components are technically rendered, only the selected screen is not hidden. </p> <p>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. </p> <p>The way Twitter works is they have a <code><main></main></code> 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. </p> <p><strong>In summary: </strong>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. </p> <p>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. </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;

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;