Question

我的应用程序有一个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}/>
        </>
    );
}

在标题组件中，我有一个图标，onPress需要将其导航到“设置”屏幕。

恐怕我不确定这是否是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'未定义）

如何从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>

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

1 个答案: