<NavigationContainer>
<Tabs.Navigator>
<Tabs.Screen name="Home" component={HomeStack} />
<Tabs.Screen name="Discover" component={Discover} />
</Tabs.Navigator>
</NavigationContainer>
I have a search component in Home Stack... And I have a search button in discover which takes me to search component in Home stack but when I use navigator.back()
it took me to the home component instead of discover the component The Stack navigator in HomeStack is like this:
<Stack.Navigator initialRouteName="HomeScreen">
<Stack.Screen
name="HomeScreen"
component={HomeScreen}
/>
<Stack.Screen
name="SearchScreen"
component={SearchScreen} // this is the search component
/>
</Stack.Navigator>
I want the back button to take me to the last screen instead of the root screen of that stack
If you do the following it will work very well and will be easier to organize.
First , you will create the StackNavigator inside your main js file, in this example will be App.js. You will create one folder to store your screens too (in this case I will call src)
App.js will looks like this:
import HomeScreen from '../src/screens/HomeScreen .js // importing screens
import SearchScreen from '../src/screens/SearchScreen.js
.
.
.
const navigator = createStackNavigator(
{
Screen1Ref: HomeScreen,
Screen2Ref: SearchScreen ,
.
.
.
},
{
initialRouteName: 'HomeScreen ',
defaultNavigationOptions: {
title: 'name',
},
}
);
export default createAppContainer(navigator);
Second , you will create your screens and export default
each screen, and import it in your App.js file where the screens will be listed (imported and receive one key) and you will create your navigators.
Inside your screens, you will use navigation.navigate('key')
to navigate to any screen. See the example:
const ScreeExample = ({navigation}) => {
return (
<Text>Testing</Test>
navigation.navigate('Screen1Ref')
)
}
export default ScreenExample
It is an easier way that I can recommend to you and will work also the button to return to the previous screen.
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.