Nesting Navigator

Nesting Navigator
Nesting Navigator berarti merender navigator di dalam layar navigator lain, sebagai contoh:

function Home() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Messages" component={Messages} />
</Tab.Navigator>
);
}

function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={Home}
options={{ headerShown: false }}
/>
<Stack.Screen name="Profile" component={Profile} />
<Stack.Screen name="Settings" component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
}

Pada contoh di atas, komponen Home berisi navigator tab. Komponen Home juga digunakan sebagai layar Home di dalam Stack Navigator di dalam komponen App. Jadi di sini, navigator tab bersarang di dalam Stack Navigator:

Stack.Navigator
- Home (Tab.Navigator)
  - Feed (Screen)
  - Messages (Screen)
- Profile (Screen)
- Settings (Screen)

Nesting Navigator berfungsi mirip dengan penanaman komponen biasa. Untuk mencapai perilaku yang diinginkan, seringkali perlu melakukan nesting beberapa navigator.

About Reza Ervani 430 Articles
Adalah pendiri programming.rezaervani.com -

Be the first to comment

Leave a Reply

Your email address will not be published.


*


This site uses Akismet to reduce spam. Learn how your comment data is processed.