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

问题描述

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

*z

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

我找到了一个“解决方案”，将“ App”添加到“底部标签导航器”中，但是问题是它出现在底部屏幕中，而我却不想这么做。

什么是最好的方法？

"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"
  },

和底部标签浏览器：

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

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

解决方法

这是一个演示：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,alignItems: 'center' }}>
            <Text>Home!</Text>
            <Button title="Go to test stack screen" onPress={gotoTestStackScreen} />
        </View>
    );
}

function SettingsScreen() {
    return (
        <View style={{ flex: 1,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>
    );
}