国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

使用React-Native導航但不使用堆棧?
P粉141911244
P粉141911244 2023-08-17 18:26:37
0
1
673
<p>所以我最近一直在研究React-Native,并取得了很大的進展。我知道如何使用React-Navigation,無論是<code>@react-navigation/native-stack</code>還是<code>@react-navigation/bottom-tabs</code>。在使用這些時,沒有什么問題。</p> <p>但是為了更好地理解我所使用的工具,我有一個問題:</p> <p>當按照預期使用導航器時,最終會得到多個屏幕,它們會在彼此之上“堆疊”,或者在返回到上一個屏幕時被拉開。我經(jīng)常參考Twitter的設計靈感,我不禁注意到他們的Web應用程序并沒有使用這種“堆疊”的方法。</p> <p>為了簡單起見,我只在這里談論Web端的情況,但在iOS上基本上是一樣的,屏幕會堆疊。(顯然,我無法查看Twitter應用程序是否像Web應用程序那樣不堆疊,但無論如何)。</p> <p><strong>當按照文檔中的正確方式使用導航器時</strong></p> <pre class="brush:php;toolbar:false;"><div style="z-index: 0; display: flex;"> //屏幕內容 </div> <div style="z-index: -1; display: none;"> //屏幕2的內容 </div> <div style="z-index: -1; display: none;"> //屏幕3的內容 </div></pre> <p>所以,所有屏幕組件在技術上都被渲染,只有選中的屏幕不會被隱藏。</p> <p>我想要做的是始終只渲染一個屏幕,沒有其他屏幕被隱藏。當用戶“導航”到不同的屏幕時,我希望這一個屏幕的內容會根據(jù)他們要去的頁面而改變。</p> <p>Twitter的工作方式是他們有一個<code><main></main></code>容器,其中包含頁面的內容,并根據(jù)用戶所在的頁面,相應地更改容器中的內容。Twitter確實使用React-Native,所以肯定有一種方法可以做到這一點。我希望有一種至少半官方的方法來實現(xiàn)這個,而不是通過一種實際上的方式來實現(xiàn)。我已經(jīng)在'React-Navigation'的文檔中搜索過,但沒有找到類似的描述。</p> <p><strong>總之:</strong>React-Navigation“堆疊”屏幕,它們同時存在,但只有位于堆?!绊敳俊钡钠聊粫@示。我正在尋找一種只使用一個屏幕并且該屏幕的內容根據(jù)用戶導航到的頁面而改變的方法。</p> <p>我已經(jīng)在React-Navigation的文檔中搜索過,試圖找到類似我所尋找的行為的描述,但沒有找到任何內容。如果有更好的React導航庫可以做到我所描述的更多功能,我希望能指點一下。</p>
P粉141911244
P粉141911244

全部回復(1)
P粉788765679

你想做的更適合于單頁面應用程序架構,其中你有一個單一的主容器,根據(jù)導航來持有變化的內容,然而,React Navigation是設計用于堆疊屏幕并在它們之間導航的。

解決方案

你可以創(chuàng)建一個自定義的導航組件,我們稱之為NavigationContainer,它持有變化的內容,這個組件將管理當前顯示的頁面并相應地渲染內容,類似于這樣:

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是另一個包含每個頁面按鈕或鏈接的組件。
當按下按鈕/鏈接時,它將調用navigateTo函數(shù),該函數(shù)從其父組件即NavigationContainer接收為props,以更新那里的currentPage狀態(tài):

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;

限制

你應該實現(xiàn)深鏈接以實現(xiàn)更好的基于URL的導航,這將允許用戶使用URL直接導航到特定頁面,此外,如果需要的話,你需要手動處理路由、動畫和過渡。
你可能還會失去一些由React Navigation等庫提供的內置導航功能。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板