从底部选项卡导航器导航到堆栈导航器

Question

我正在构建一个具有以下依赖项的应用程序：

"dependencies": {
    "@react-navigation/bottom-tabs": "^5.8.0",
    "@react-navigation/compat": "^5.2.5",
    "@react-navigation/material-bottom-tabs": "^5.2.16",
    "@react-navigation/material-top-tabs": "^5.2.16",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",
    "expo": "~38.0.8",
    "expo-status-bar": "^1.0.2",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-elements": "^2.0.4",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-modals": "^0.19.9",
    "react-native-reanimated": "^1.10.2",
    "react-native-screens": "^1.0.0-alpha.23",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0",
    "react-navigation-stack": "^2.8.2",
    "react-navigation-tabs": "^2.9.0"
  },

假设我有一个堆栈导航器和一个底部选项卡导航器。如何轻松地从底部选项卡的屏幕导航到 Stack Navigator 的屏幕？

我找到了一个“解决方案”，即在我的底部选项卡导航器中添加应用程序，但问题是它出现在底部屏幕中，而我不希望这样。

最好的方法是什么？

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer independent={true}>
      <Stack.Navigator initialRouteName="Index">
        <Stack.Screen name="MyNotes" component={MyNotes} />
        <Stack.Screen name="Login" component={Login} />
        <Stack.Screen name="Signup" component={Signup} />
        <Stack.Screen name="Index" component={Index} />
        <Stack.Screen name="PasswordForgot" component={PasswordForgot} />
        <Stack.Screen name="BottomNavigation" component={BottomNavigation} />
        <Stack.Screen name="ProfileParameters" component={ProfileParameters} />
        <Stack.Screen name="MyProfile" component={MyProfile} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

还有一个底部标签导航器：

const Tab = createBottomTabNavigator();
const tabActiveColor = "#EF2D56";
const tabInActiveColor = "#898A8D";

const BottomTabNavigator = () => {
  return (
    <Tab.Navigator
      initialRouteName="MyNotes"
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let tabIcon = "../assets/notes.png";
          if (route.name === "MyNotes") {
            tabIcon = require("../assets/notes.png");
          } else if (route.name === "Feed") {
            tabIcon = require("../assets/feed.png");
          } else if (route.name === "Discover") {
            tabIcon = require("../assets/decouvrir.png");
          } else if (route.name === "MyProfile") {
            tabIcon = require("../assets/myprofile.png");
          }
          return (
            <Image
              source={tabIcon}
              resizeMode="contain"
              style={{
                height: 26.4,
                width: 22,
                tintColor: focused ? tabActiveColor : tabInActiveColor,
              }}
            />
          );
        },
      })}
      tabBarOptions={{
        style: { zIndex: 110 },
        safeAreaInset: { bottom: "never" },
        activeTintColor: "#000000",
      }}
    >
      <Tab.Screen
        name="MyNotes"
        component={MyNotes}
        options={{
          tabBarLabel: "Notes",
        }}
      />
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: "Feed",
        }}
      />
      <Tab.Screen
        name="Discover"
        component={Discover}
        options={{
          tabBarLabel: "Découvrir",
        }}
      />
      <Tab.Screen
        name="MyProfile"
        component={MyProfile}
        options={{
          tabBarLabel: "Profil",
        }}
      />
      <Tab.Screen name="App" component={App} />
    </Tab.Navigator>
  );
};

export default BottomTabNavigator;


const Stack = createStackNavigator();

export default function BottomNavigation() {
  return (
    <NavigationContainer independent={true}>
      <BottomTabNavigator />
    </NavigationContainer>
  );
}

我想做的导航示例：从底部选项卡的 MyProfile 屏幕导航到堆栈导航器中的 ProfileParameter 屏幕。

Answer 1

这是一个演示：https://snack.expo.io/@nomi9995/1826cf

只使用一个NavigationContainer 并使底部标签成为堆栈导航器的一部分，然后您可以轻松地从底部标签移动到堆栈屏幕

喜欢这个

import * as React from 'react';
import { Text, View, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

function TestScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Test!</Text>
        </View>
    );
}

function HomeScreen(props) {
    const gotoTestStackScreen = () => {
        props.navigation.navigate('Test');
    };
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Home!</Text>
            <Button title="Go to test stack screen" onPress={gotoTestStackScreen} />
        </View>
    );
}

function SettingsScreen() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
            <Text>Settings!</Text>
        </View>
    );
}

const Tab = createBottomTabNavigator();

function MyTabs() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeScreen} />
            <Tab.Screen name="Settings" component={SettingsScreen} />
        </Tab.Navigator>
    );
}

const Stack = createStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator initialRouteName="Tabs">
                <Stack.Screen name="Test" component={TestScreen} />
                <Stack.Screen name="Tabs" component={MyTabs} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}