如何在React Navigation 6中在两个导航器之间导航时解决这种奇怪的行为?

w6lpcovy  于 2023-06-24  发布在  React
关注(0)|答案(2)|浏览(110)

在我的代码中,我有一个由Stack和Bottom Tab组成的导航结构。我想隐藏ProfileScreen上的选项卡。按照React Native Navigation suggestion,我相应地构造了导航,但我遇到了一个问题。
问题是,当我从Home -> Profile导航,然后是Profile -> Feed时,导航从Home -> Profile -> Home -> Feed开始。
下面是我的导航结构。如果没有奇怪的导航行为,我如何才能实现我的需求?或者有没有其他方法隐藏底部选项卡栏?
这是snack.expo作为参考。

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

const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();
const HomeStack = createNativeStackNavigator();

function EmptyScreen() {
    return <View />;
}

function FeedScreen() {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Feed Screen</Text>
        </View>
    );
}

function ProfileScreen({navigation}) {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Profile Screen</Text>
            <Button title="Go to Feed" onPress={() => navigation.navigate('Feed')} />
        </View>
    );
}

function HomeScreen({navigation}) {
    return (
        <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
            <Text>Home Screen</Text>
            <Button title="Go to Profile" onPress={() => navigation.navigate('Profile')} />
        </View>
    );
}

const HomeStackNavigation = () => {
    return (
        <HomeStack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} options={{headerShown: false}} />
            <Stack.Screen name="Feed" component={FeedScreen} options={{headerShown: false}} />
        </HomeStack.Navigator>
    );
};

function HomeTabs() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeStackNavigation} />
            <Tab.Screen name="Settings" component={EmptyScreen} />
        </Tab.Navigator>
    );
}

function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeTabs} options={{headerShown: false}} />
                <Stack.Screen name="Profile" component={ProfileScreen} options={{headerShown: false}} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

wvt8vs2t

wvt8vs2t1#

您需要添加一个堆栈导航器,包含所有没有标签栏的屏幕,并在此堆栈中添加一个标签导航器与所有标签屏幕。
我已经更新了你的零食与这些变化。请检查here
你也可以使用this的例子。

aor9mmx1

aor9mmx12#

从我看到的小吃似乎工作正常?

相关问题