如何使用反应导航导航到反应原生的新屏幕并且组件位于不同的文件中

Question

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.

1. 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.

2. Can I call navigation.navigate in the following way?

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

Answer 1

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