React Navigation v5，向我的应用程序标题添加堆栈导航

Question

我正在使用 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>
  );
};

在我的 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>
);

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

有效载荷为 {"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>
);

Answer 1

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

据我了解，您需要有一个根 Drawer.Navigator，并且在您的主屏幕内，您需要一个 Stack.Navigator

This article explains the details of combining react-native-navigators

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