如何使用反應導航導航到反應原生的新屏幕並且組件位於不同的文件中

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 的組件，而 detailsScreen.js 包含另一個名為 detailsScreen 的組件。

1. 我應該怎么做才能從 Home 導航到 detailsScreen？ 我必須導入/導出任何東西嗎？ 如果是，在哪里？ 官方文檔（ https://reactnavigation.org/docs/navigating/ ）只考慮了所有組件都在同一個文件中的場景。

2. 我可以通過以下方式調用 navigation.navigate 嗎？

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

Answer 1

您可以通過navigate方法導航任何屏幕。 只需確保屏幕已添加到您的堆棧中。 對於導航，只需按照navigation.navigate('Details')

用於訪問組件中的navigation 。您可以傳遞道具 function YourComponent({ navigation }){

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

請按照文檔