你想做的更適合于單頁面應用程序架構,其中你有一個單一的主容器,根據(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等庫提供的內置導航功能。