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

Question

我计划在我的项目中使用 React Navigation 在两个屏幕内导航。

index.js 看起来像

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

home.js 包含一个名为 home 的组件，而 detailsS​​creen.js 包含另一个名为 detailsS​​creen 的组件。

1. 我应该怎么做才能从 Home 导航到 detailsS​​creen？我必须导入/导出任何东西吗？如果是，在哪里？官方文档（https://reactnavigation.org/docs/navigating/）只考虑了所有组件都在同一个文件中的场景。

2. 我可以通过以下方式调用 navigation.navigate 吗？

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

Answer 1

您可以通过navigate 方法导航任何屏幕。只需确保屏幕已添加到您的堆栈中。 对于导航，只需按照 navigation.navigate('Details')

用于在您的组件中访问navigation。您可以传递道具 函数 YourComponent({ 导航 }){

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

请关注Doc