React native React Native：在何处放置其他屏幕的导航器？

我的应用程序有一个

BottomTabNavigator

，每个选项卡都链接到一个组件，即

StackNavigator

。 通过该实现，我可以轻松地在选项卡屏幕之间切换，并可以看到详细的屏幕

以下是我的屏幕组件的代码：

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}/>
        </>
    );
}

导出默认功能屏幕（{props，children}）{
返回(
{
返回
},
}}
>
{儿童}
);
}

在header组件中，我有一个图标，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（“设置”），“navigation.navigate”未定义）

---

如何从标题组件访问导航？

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

请尝试下面的方法

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

{
返回
},
}}
>

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

请尝试下面的方法

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

{
返回
},
}}
>

我已更改了实现，但现在收到以下错误：无法注册导航器。您是否已使用NavigationContainer包装应用程序。这可能是因为TabNavigator。但是如何在每个屏幕上同时显示这两个选项呢？我已经更改了实现，但是现在我收到了以下错误：无法注册导航器。您是否已使用NavigationContainer包装应用程序。这可能是因为TabNavigator。但是如何在每个屏幕上同时显示这两个选项呢？