I'm new in react native and I have a question about react navigation. I defined some screens in my App.js. like this:
const App = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Home' component={Home} options={{ headerShown: false }} />
<Stack.Screen name='Profile' component={Profile} />
<Stack.Screen name='News' component={News} />
</Stack.Navigator>
</NavigationContainer>
);
};
I think I just can use these screens in App.js. how can I access and use these screens in another screen for example Profile.js. how can I import those? should I define this screens again?
my Profile screen uses react navigation too. My Profile:
const Profile = () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Profile' component={Profile} />
<Stack.Screen name='Settings' component={Settings} />
</Stack.Navigator>
</NavigationContainer>
);
};
It is well documented here: Navigating to a new screen
Just use navigation.navigate('Profile') from Home screen to navigate to profile and navigation.goBack() to go back to Home screen(previous screen).
note: same applicable to every screen defined inside stack navigator.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.