如何在 Tab Navigator React Navigation 5 中始终设置 Stack Navigator 的第一个屏幕

Question

React Navigation 5

I've build a StackNavigator inside of a TabNavigator, and the navigation between home screen and other screens is working. But the problem is,When I move from Tab2 to Tab1 I expect Tab1 always show me first screen of StackNavigator.

tab1
   -> Stack
        -screen1
        -screen2
tab2

I am on screen2 and then move to tab2 after that then I move back to Tab1 I want to always display screen1.

I am try to use

OnTabPress({navigation})=>{
    navigation.navigate("stackName",{
     screen: "screen1"
   }).
}

Its work but its show me screen2 first then navigate to screen1. Is there any other Solution. https://snack.expo.io/@usamasomy/groaning-donut

Answer 1

Use unmountOnBlur: true in options. Eg.

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

So when you are navigating away from this tab and you're on screen2 of Stack1, you will always come on the first screen of this stackNavigator when coming back to this tab.

Answer 2

initialRouteName= "NAME" is the keyword to make sure you have a default and make sure you use navigate() push() pop() accordingly.

Firstly, create a custom TabBar so we can write our own functions executed by 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,
          });
        };

Then in the TabScreens override the original TabBar in Tab.Navigator by using tabBar=... then call navigation.reset() with index:0 and routes:{{name: 'Screen1'}} every time MyTabBar is pressed.

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

This can be greatly improved eg:

-some logic before `navigation.reset()`

-Accessing onPress without creating a new component 

-etc..

finally snack available here: https://snack.expo.io/@karammarrie/customtabbar

Answer 3

i have a simple solution is to set initialRouteName= "screen1" in

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

   {/** **/}

if the screen still shows the first screen 2, you just need to comment the line <Stack.Screen name="screen2" component={Screen2} /> and reload the screen, then remove the comment line.

Answer 4

There is no documentation about it, but the following code worked for me:

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

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

The code above always navigates to the 'Screen 1 Child 1' when the "Screen1 Tab" is pressed.

Answer 5

like this

e

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

Answer 6

Another option is to clear the stack of the navigation before navigating, so when you return to that screen, the navigation starts from the top

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