Question

我正在开发一个具有底部标签导航的应用程序。为了实现这一点，我使用了 react-navigation-material-bottom-tabs，它运行良好。就像我有 3 个屏幕，在底部选项卡导航器中说主页、个人资料和关于。但是在主屏幕中，我有多个屏幕流要实现。为此，我使用了 Stack Navigator，它也运行良好。所以我的应用流程就像 Home-> Screen1-> Screen2-> Screen3 我面临的问题是假设我在 Screen3 上，然后我从底部导航切换到个人资料屏幕，然后再次切换到主屏幕。

<块引用>

我应该可以在那里看到主屏幕，但目前显示的是 Screen3

以下是我的代码：

MainTabs.js

 import { createStackNavigator } from '@react-navigation/stack';
    import Icon from 'react-native-vector-icons/Ionicons';
    import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';
    
    const HomeStack = createStackNavigator();
    const ProfileStack = createStackNavigator();
    const AboutStack = createStackNavigator();
    
    const HomeStackScreen = ({ navigation }) => {
      return (
        <HomeStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'Screen1'}}>
          <HomeStack.Screen name="Screen1" component={Screen1} />
          <HomeStack.Screen name="Screen2" component={Screen2} />
          <HomeStack.Screen name="Screen3" component={Screen3}/>
        </HomeStack.Navigator>
      )
    }
    
    const ProfileStackScreen = ({ navigation }) => {
      return (
        <ProfileStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'Profile'}}>
          <ProfileStack.Screen name="Profile" component={Profile} />
        </ProfileStack.Navigator>
      )
    }
    
    const AboutStackScreen = ({ navigation }) => {
      return (
        <AboutStack.Navigator screenOptions={{headerShown: false, initialRouteName: 'About'}}>
          <AboutStack.Screen name="About" component={About} />
        </AboutStack.Navigator>
      )
    }

const MainTabScreen = () => {
  return (
      <Tab.Navigator
        initialRouteName="Home"
        activeColor="#fff"
        barStyle={{ backgroundColor: 'red' }}
        labeled={false}
      >
        <Tab.Screen
          name="Home"
          component={HomeStackScreen}
        />    
        
        <Tab.Screen
          name="Profile"
          component={ProfileStackScreen}
        />

        <Tab.Screen
          name="About"
          component={AboutStackScreen}   
        />

      </Tab.Navigator>
  );

export default MainTabScreen;

Answer 1

点击底部标签导航元素时使用 navigation.navigate('routeName')。您必须注册到堆栈第一个屏幕的路由，然后您可以根据需要从那里进入堆栈。

Answer 2

set unmountOnBlur options to true. 如果你不介意的话。

<块引用>

通常情况下，我们不建议启用此道具，因为用户不希望在切换选项卡时丢失导航历史记录。如果您启用此道具，请考虑这是否真的会为用户提供更好的体验。

另一种方法是在离开 screen3 时弹出堆栈导航器。

在底部标签栏中反应原生清除堆栈导航器堆栈

2 个答案: