React Native：在哪里放置其他屏幕的导航器？

Question

我的应用程序有一个BottomTabNavigator，每个选项卡都链接到一个组件，即StackNavigator。 通过该实现，我可以轻松地在选项卡屏幕之间切换并查看详细屏幕。

这是我的 Screen 组件的代码：

export default function Screen ({props, children}) {
    
    return (
        <>
        <Stack.Navigator
            screenOptions={{
                cardShadowEnabled: false,
                header: (props) => {
                    return <Header {...props} />
                },
            }}
        >
            <Stack.Screen name="Settings" component={SettingsScreen} />
        </Stack.Navigator>
        <SafeAreaView style={styles.screen}>
            <View style={styles.container}>{ children }</View>
        </SafeAreaView>
        <TabNavigator i18n={i18n}/>
        </>
    );
}

在标题组件中，我有一个图标，onPress 需要导航到 SettingsScreen。

恐怕我不确定这是否是 SettingsNavigator 的正确实现，如果是，如何单击我的标题菜单导航到 SettingsScreen。

这是我的 Header.js 代码：

export default function Header (props, navigation) {
    ...
    return (
        <View style={styles.container}>
            <View style={styles.link} onPress={navigation.navigate("Settings")}>
                <MaterialCommunityIcons name="tune" size={32} />
            </View>
        </View>
    )
};

我收到一个错误：

TypeError：navigation.navigate 不是函数。（在 'navigation.navigate("Settings")', 'navigation.navigate' 未定义）

如何从我的 Header 组件访问导航？

Answer 1

我不认为这是一个正确的实现。

请尝试如下

<Stack.Navigator
  initialRouteName={Routes.SignIn}
  screenOptions={{
    cardShadowEnabled: false,

    header: (props) => {
      return <Header {...props} />
    },
  }}
>
  <Stack.Screen name={Routes.SignIn} component={SignInScreen} />
  <Stack.Screen name={Routes.ForgotPassword} component={ForgotPasswordScreen} />
  <Stack.Screen name={Routes.SignUp} component={SignUpScreen} />
</Stack.Navigator>