React native React navigation v5，将堆栈导航添加到我的应用程序标题

我正在使用react navigation 5构建我的应用程序导航系统

我想添加到“打开通知”屏幕的链接：

我创建了一个RenderHeaderRight组件来覆盖我所有堆栈中的右组件

导航：

const RenderHeaderRight = ({navigation}) => {
  return (
    <View style={{flexDirection: 'row-reverse'}}>
      <TouchableHighlight
        underlayColor={COLORS.DEFAULT}
        style={styles.iConMenuContainer}
        onPress={() => navigation.openDrawer()}>
        <Image source={menu} style={styles.iConMenu} />
      </TouchableHighlight>
      <TouchableHighlight
        underlayColor={COLORS.DEFAULT}
        style={styles.notificationsIconContainer}
        onPress={() => navigation.navigate('Notifications')}>
        <>
          <Image source={notifications} style={styles.notificationsIcon} />
          <Image source={notifMark} style={styles.badge} />
        </>
      </TouchableHighlight>
    </View>
  );
};

const RenderHeaderRight=（{navigation}）=>{
返回(
navigation.openDrawer（）}>
导航。导航（'Notifications'）}>
);
};

在我的HomeStackScreen中，我使用RenderHeaderRight：

const HomeStackScreen = ({navigation}) => (
  <HomeStack.Navigator
    initialRouteName="Home"
    headerMode="screen"
    mode="modal"
    screenOptions={{
      headerStyle: {
        backgroundColor: COLORS.WHITE,
        elevation: 0, // remove shadow on Android
        shadowOpacity: 0, // remove shadow on iOS
        borderBottomWidth: 0,
      },
      headerTintColor: COLORS.GREY,
      headerTitleStyle: {
        fontFamily: 'Montserrat-SemiBold',
        fontWeight: '600',
        fontSize: 18,
      },
    }}>
    <HomeStack.Screen
      name="Home"
      component={Home}
      options={{
        title: 'Expanded',
        headerLeft: () => <RenderHeaderLeft />,
        headerRight: () => <RenderHeaderRight navigation={navigation} />,
        headerTitleAlign: 'left',
      }}
    />
    <HomeStack.Screen name="HomeDetails" component={HomeDetails} />
  </HomeStack.Navigator>
);

const HomeStackScreen=（{navigation}）=>(
,
headerRight:（）=>，右，
headerTitleAlign:'左'，
}}
/>
);

当我点击标题右侧按钮打开通知屏幕时，我发现一个错误：

任何导航器都未处理负载为{“name”：“Notifications”}的操作“NAVIGATE”

我应该在哪里创建通知的堆栈导航屏幕

我需要添加如下通知：

const HomeStackScreen = ({navigation}) => (
  <HomeStack.Navigator
    initialRouteName="Home"
    headerMode="screen"
    mode="modal"
    screenOptions={{
      headerStyle: {
        backgroundColor: COLORS.WHITE,
        elevation: 0, // remove shadow on Android
        shadowOpacity: 0, // remove shadow on iOS
        borderBottomWidth: 0,
      },
      headerTintColor: COLORS.GREY,
      headerTitleStyle: {
        fontFamily: 'Montserrat-SemiBold',
        fontWeight: '600',
        fontSize: 18,
      },
    }}>
    <HomeStack.Screen
      name="Home"
      component={Home}
      options={{
        title: 'Expanded',
        headerLeft: () => <RenderHeaderLeft />,
        headerRight: () => <RenderHeaderRight navigation={navigation} />,
        headerTitleAlign: 'left',
      }}
    />
    <HomeStack.Screen name="HomeDetails" component={HomeDetails} />
    <HomeStack.Screen
      name="Notifications".   // add the screen here
      component={Notifications}
      options={{headerShown: false}}
    />
  </HomeStack.Navigator>
);

const HomeStackScreen=（{navigation}）=>(
,
headerRight:（）=>，右，
headerTitleAlign:'左'，
}}
/>
);

删除了不必要的样式/图像

据我所知，您需要一个根

抽屉.Navigator

，在主屏幕内部，您需要一个

堆栈.Navigator

从“React”导入React
从“react native”导入{TouchableHighlight，View，Text}
从“@react navigation/native”导入{NavigationContainer}
从“@react navigation/drawer”导入{createDrawerNavigator}
从“@react navigation/stack”导入{createStackNavigator}
const RenderHeaderRight=（{navigation}）=>{
返回(
navigation.openDrawer（）}>
菜单
导航。导航（“通知”）}>
图1
图2
)
}
const Stack=createStackNavigator（）
const Drawer=createDrawerNavigator（）
常量通知=（）=>(
通知
)
常量Home=（）=>(
家
)
const NotificationsScreen=（）=>(
通知屏幕
)
常量主屏幕=（）=>(
({
标题：“家”，
headerRight:（）=>，右，
})}
导航选项={（{navigation}）=>({
headerTitleAlign:“左”，
})}
/>
)
导出默认函数App（）{
返回(
)
}

是否希望

通知策略

存在于

主策略

之外？可能是，因为我想在我的应用程序中打开每个屏幕的通知屏幕我编辑了我的问题，向您展示我在哪里添加了堆栈我应该在每个堆栈导航器中添加通知屏幕吗？看-给我5分钟谢谢您的回答，和我做的一样，我应该在每个堆栈中添加通知屏幕？如果你想在这些堆栈中添加通知屏幕，那么是的。

import React from "react"
import { TouchableHighlight, View, Text } from "react-native"
import { NavigationContainer } from "@react-navigation/native"
import { createDrawerNavigator } from "@react-navigation/drawer"
import { createStackNavigator } from "@react-navigation/stack"

const RenderHeaderRight = ({ navigation }) => {
  return (
    <View style={{ flexDirection: "row-reverse" }}>
      <TouchableHighlight onPress={() => navigation.openDrawer()}>
        <View>
          <Text>Menu</Text>
        </View>
      </TouchableHighlight>
      <TouchableHighlight onPress={() => navigation.navigate("Notifications")}>
        <>
          <View>
            <Text>Image 1</Text>
          </View>
          <View>
            <Text>Image 2</Text>
          </View>
        </>
      </TouchableHighlight>
    </View>
  )
}

const Stack = createStackNavigator()
const Drawer = createDrawerNavigator()

const Notifications = () => (
  <View>
    <Text>Notifications</Text>
  </View>
)
const Home = () => (
  <View>
    <Text>Home</Text>
  </View>
)

const NotificationsScreen = () => (
  <View>
    <Text>Notifications Screen</Text>
  </View>
)
const HomeScreen = () => (
  <View>
    <Stack.Navigator>
      <Stack.Screen
        name="Home"
        component={Home}
        options={({ navigation }) => ({
          title: "Home",
          headerRight: () => <RenderHeaderRight navigation={navigation} />,
        })}
        navigationOptions={({ navigation }) => ({
          headerTitleAlign: "left",
        })}
      />
      <Stack.Screen name="Notifications" component={Notifications} />
    </Stack.Navigator>
  </View>
)

export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator initialRouteName="Home">
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="Notifications" component={NotificationsScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  )
}