react-native - 无法从反应原生的深层组件调用嵌套导航屏幕

问题描述

我已经按照本教程为我的 react native expo 应用程序创建了抽屉和主选项卡导航。

现在我需要一个不应在 Drawer 或 Tab 中列出的屏幕，并且需要从未发送导航道具的深层组件中调用该屏幕。

我尝试了 useNavigation Hook，但在 react native 无法找到任何此类屏幕名称时出现错误。

PFB 暂定示例代码：从 App.js 调用的 Main Tab

const Tab = createMaterialBottomTabNavigator();
const HomeStack = createStackNavigator();
const ProfileStack = createStackNavigator();
const ListStack = createStackNavigator();

const MainTabScreen = () => (
    <Tab.Navigator
      initialRouteName="Home"
      activeColor="#fff"
      barStyle={{ backgroundColor: '#009387' }}
    >
      <Tab.Screen
        name="Home"
        component={HomeStackScreen}
        options={{
          tabBarLabel: 'Home',
          tabBarColor: '#009387',
          tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
          ),
        }}
      />
      <Tab.Screen
        name="Profile"
        component={ProfileStackScreen}
        options={{
          tabBarLabel: 'Profile',
          tabBarColor: '#1f65ff',
          tabBarIcon: ({ color }) => (
            <Icon name="aperture" color={color} size={26} />
          ),
        }}
      />
</Tab.Navigator>
);

export default MainTabScreen;

const HomeStackScreen = ({navigation}) => (
  <HomeStack.Navigator screenOptions={{
    headerStyle: {
      backgroundColor: '#009387',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold'
    }
  }}>
    <HomeStack.Screen name = "Home" component = {Home}
    options = {{
      title: 'Overview',
      headerLeft: () => (
        <Icon.Button name="menu" size={25}
        backgroundColor="#009387" onPress={()=>navigation.openDrawer()} 
        ></Icon.Button>
        )
    }}
    />
  </HomeStack.Navigator>
);

const ProfileStackScreen = ({navigation}) => (
  <ProfileStack.Navigator screenOptions={{
    headerStyle: {
      backgroundColor: '#d02860',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold'
    }
  }}>
    <ProfileStack.Screen name = "Profile" component = {Profile}
    options = {{
      headerLeft: () => (
        <Icon.Button name="menu" size={25}
        backgroundColor="#d02860" onPress={()=>navigation.openDrawer()} 
        ></Icon.Button>
        )
    }}
    />
  </ProfileStack.Navigator>
);

const ListStackScreen = ({navigation}) => (
  <NotificationsStack.Navigator screenOptions={{
    headerStyle: {
      backgroundColor: '#694fad',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold'
    }
  }}>
    <ListStack.Screen name = "List" component = {List}
    options = {{
      headerLeft: () => (
        <Icon.Button name="menu" size={25}
        backgroundColor="#694fad" onPress={()=>navigation.openDrawer()} 
        ></Icon.Button>
        )
    }}
    />
  </NotificationsStack.Navigator>
);

useNavigation 组件部分：

import { useNavigation } from '@react-navigation/native';
.
.
.
const SomeStuff = ({item}) => {
......
<ListButton title={Count} screenName="ListStackScreen" />
.....
}
.
.

function ListButton({ title, screenName }) {
  const navigation = useNavigation();

  return (
    <Button
      title={`${title} Total`}
      onPress={() => navigation.navigate(screenName)}
    />
  );
}

也试过：

navigation.navigate('HomeDrawer',{screen: screenName})

我需要从深层组件调用上面的 ListStackScreen。我尝试使用 navigation.navigate(ListStackScreen) 但它不像上面解释的那样工作。请让我知道如何使用屏幕而不在任何抽屉或选项卡中直观地显示它。

编辑：尝试给定答案后更新我在主 app.js 中也有这个：

<Drawer.Screen name="HomeDrawer" component={MainTabScreen} />

标签： react-nativereact-navigation

此设置应允许您在 HomeStackScreen 和 ListStackScreen 之间导航。

const Stack = createStackNavigator();

function HomeStack() {
  return (
    <Stack.Navigator
      initialRouteName="HomeStackScreen">
      <Stack.Screen
        name="HomeStackScreen"
        component={HomeStackScreen}
      />
      <Stack.Screen
        name="ListStackScreen"
        component={ListStackScreen}
      />
    </Stack.Navigator>
  );
}

    <NavigationContainer>
      <Tab.Navigator
        initialRouteName="HomeStack">
        <Tab.Screen
          name="HomeStack"
          component={HomeStack}
          }}
        />
    …

您可以将 stacknavigator 嵌套到 Drawer 中，内部的 stacknavigator 屏幕不会显示在 Drawer 中。

我创建了一个示例

react-native - 无法从反应原生的深层组件调用嵌套导航屏幕

问题描述

解决方案

推荐阅读