使用模糊时卸载：在选项中为true。

<Tab.Screen
        name="Stack1"
        component={Stack1}
        options={{
          tabBarLabel: "Stack1",
          unmountOnBlur: true,
        }}
      />

因此，当您导航离开此选项卡并位于Stack1的屏幕2时，返回此选项卡时，您将始终显示此stackNavigator的第一个屏幕。

initialRouteName= "NAME"是关键字，用于确保您有默认值，并确保相应地使用navigate()push()pop()。
首先，创建一个自定义TabBar，这样我们就可以编写由onPress执行的函数

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
            ? options.title
            : route.name;

        const isFocused = state.index === index;

        const onPress = () => {
            navigation.reset({
              index: 0,
              routes: [{ name: 'Screen1' }],
            }) 

        if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }      
            }}
        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

然后在TabScreens中使用tabBar=...覆盖Tab.Navigator中的原始TabBar，然后每次按MyTabBar时使用index:0和routes:{{name: 'Screen1'}}调用navigation.reset()。

const TabScreens = ()=>{
  return(
    <Tab.Navigator  tabBar={props => <MyTabBar {...props} />} initialRouteName="Tab1Screens" >
      <Tab.Screen 
        name      = "Tab1Screens"
        component = {Tab1Screens}
      />
      <Tab.Screen
        name      = "Tab2Screens"
        component = {Tab2Screens}
      />
    </Tab.Navigator>
  )
}

        return (
          <TouchableOpacity
            accessibilityRole="button"
            accessibilityStates={isFocused ? ['selected'] : []}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={{ flex: 1 }}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

这可以大大改善，例如：

-some logic before `navigation.reset()`

-Accessing onPress without creating a new component 

-etc..

最后小吃可在这里：https://snack.expo.io/@karammarrie/customtabbar

我有一个简单的解决方案，就是在中设置initialRouteName=“screen1

<Stack.Navigator
      screenOptions={{
        headerShown: false,
      }}
      initialRouteName="screen1"
    >
      <Stack.Screen name="screen1" component={Screen1} />
      <Stack.Screen name="screen2" component={Screen2} />
</Stack.Navigator>

   {/** **/}

如果屏幕仍然显示第一个屏幕2，您只需要注解行<Stack.Screen name="screen2" component={Screen2} />并重新加载屏幕，然后删除注解行。

没有关于它的文档，但下面的代码对我很有效：

const navigationComp = useNavigation<StackNavigationProp<Screen1Stack>();

 <Tab.Screen
    name="Screen1 Tab"
    component={Screen1StackScreen}
    listeners={{
          tabPress: () => {
            navigationComp.replace('Screen 1 Child 1');
          },
        }}
  />

当按下“屏幕1选项卡”时，上面的代码始终导航到“屏幕1子1”。

像这样
电子

xport default function BottonTab() {
      const tabOffsetValue = useRef(new Animated.Value(0)).current;
      return (
        <View style={{flex: 1, backgroundColor: colors.primaryColor}}>
          <Tab.Navigator
            initialRouteName="Home"
            screenOptions={{
              showLabel: false,
              tabBarShowLabel: false,
              headerShown: false,
              tabBarStyle: {
                backgroundColor: colors.white,
                position: 'absolute',
                bottom: hp(0.51),
                marginHorizontal: wp(2),
                height: hp(8),
                borderRadius: wp(2),
                shadowColor: '#000',
                shadowOpacity: 0.06,
                shadowOffset: {
                  width: 10,
                  height: 10,
                },
                paddingHorizontal: 20,
              },
            }}>
            <Tab.Screen
              name={'Home'}
              component={HomeScreen}
              options={{
                title: 'Home',
                showLabel: false,
                tabBarIcon: ({focused}) => (
                  <View>
                    <FontAwesome5
                      name="home"
                      size={wp(6)}
                      color={
                        focused ? colors.primaryColor : colors.secondaryTextColor
                      }
                    />
                  </View>
                ),
              }}
              listeners={({navigation, route}) => ({
                tabPress: e => {
                  Animated.spring(tabOffsetValue, {
                    toValue: getWidth() * 0,
                    useNativeDriver: true,
                  }).start();
                },
              })}
            />
    
            <Tab.Screen
              name={'HelpDiskScreen'}
              component={HelpDiskScreen}
              options={{
                title: 'HelpDisk',
                tabBarIcon: ({focused}) => (
                  <View>
                    <FontAwesome5
                      name="search"
                      size={wp(6)}
                      color={
                        focused ? colors.primaryColor : colors.secondaryTextColor
                      }
                    />
                  </View>
                ),
              }}
              listeners={({navigation, route}) => ({
                tabPress: e => {
                  Animated.spring(tabOffsetValue, {
                    toValue: getWidth() * 1.22,
                    useNativeDriver: true,
                  }).start();
                },
              })}
            />
    
            <Tab.Screen
              name={'ManageBookingScreen'}
              component={ManageBookingScreen}
              options={{
                title: 'Manage',
                tabBarIcon: ({focused}) => (
                  <View>
                    <Feather
                      name="settings"
                      size={wp(6)}
                      color={
                        focused ? colors.primaryColor : colors.secondaryTextColor
                      }
                    />
                  </View>
                ),
              }}
              listeners={({navigation, route}) => ({
                tabPress: e => {
                  Animated.spring(tabOffsetValue, {
                    toValue: getWidth() * 2.52,
                    useNativeDriver: true,
                  }).start();
                },
              })}
            />
    
            <Tab.Screen
              name={'ParkyingTypesScreen'}
              component={ParkyingTypesScreen}
              options={{
                title: 'Parking',
                tabBarIcon: ({focused}) => (
                  <View>
                    <FontAwesome5
                      name="bell"
                      size={wp(6)}
                      color={
                        focused ? colors.primaryColor : colors.secondaryTextColor
                      }
                    />
                  </View>
                ),
              }}
              listeners={({navigation, route}) => ({
                tabPress: e => {
                  Animated.spring(tabOffsetValue, {
                    toValue: getWidth() * 3.82,
                    useNativeDriver: true,
                  }).start();
                },
              })}
            />
          </Tab.Navigator>
    
          <Animated.View
            style={{
              width: getWidth(),
              marginLeft: getWidth() * 0.58,
              height: 2,
              backgroundColor: colors.primaryColor,
              bottom: hp(7),
              borderRadius: 20,
              transform: [{translateX: tabOffsetValue}],
            }}></Animated.View>
        </View>
      );
    }

另一种选择是在导航之前清除导航堆栈，这样当您返回到该屏幕时，导航将从顶部开始

navigation.dispatch(StackActions.popToTop());
      navigation.navigate("NextScreen");