How to navigate to a new screen in react native using react navigation and the components are in a d-CodePudding

I am planning to use React Navigation in my project to navigate within two screens.

The index.js looks like

<NavigationContainer>
  <Stack.Navigator initialRouteName="Home">
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Details" component={DetailsScreen} />
  </Stack.Navigator>
</NavigationContainer>

home.js contains a component called home and detailsScreen.js contains another component called detailsScreen.

What should I do to navigate to detailsScreen from Home? Do I have to import/export anything? If yes, where? The official docs (https://reactnavigation.org/docs/navigating/) only consider the scenario where all components are in the same file.
Can I call navigation.navigate in the following way?

return (
  <View>
    {navigation.navigate('Details')}
  </View>
)

CodePudding user response：

You can navigate the any screen by navigate method. Just make sure that the screen is added in your stack. For navigation, just follow navigation.navigate('Details')

For accessing navigation in your component.You can pass the prop function YourComponent({ navigation }){

//use navigation
//navigation.navigate("Details")
}

Please follow Doc