P粉7887656792023-08-18 14:54:31
你想做的更適合單頁應用程式架構,其中你有一個單一的主容器,根據導航來持有變化的內容,然而,React Navigation是設計用於堆疊螢幕並在它們之間導航的。
你可以建立一個自訂的導航元件,我們稱之為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
函數,該函數從其父元件即NavigationContainer
接收為props,以更新那裡的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;
你應該實現深連結以實現更好的基於URL的導航,這將允許用戶使用URL直接導航到特定頁面,此外,如果需要的話,你需要手動處理路由、動畫和過渡。
你可能還會失去一些由React Navigation等函式庫提供的內建導航功能。