如何在 React Native 的另一个选项卡中导航回上一个屏幕

Question

我有 4 个导航堆栈菜单、仪表板、进度和通知。

export const HomeTabs = () => {
      return (
        <Tabs.Navigator
          tabBarPosition="bottom"
          initialRouteName="DashboardStack"
          screenOptions={getTabNavigationOptions}>
          <Tabs.Screen component={MenuStack} name="MenuStack" />
          {/* <Tabs.Screen component={CalendarStack} name="CalendarStack" /> */}
          <Tabs.Screen component={DashboardStack} name="DashboardStack" />
    
          <Tabs.Screen
            component={ProgressStack}
            name="ProgressStack"
            initialParams={{route_index: 0}}
          />
          <Tabs.Screen component={NotificationStack} name="NotificationStack" />
        </Tabs.Navigator>
      );
    };

后退导航在特定选项卡的屏幕之间正常工作，但是当我切换选项卡然后立即按返回时，它应该切换到另一个选项卡中的上一个屏幕。谁能告诉我如何实现这一目标？

Answer 1

write headerShown: false（关闭屏幕上的标题导航）

<Tabs.Screen component={ProgressStack}
  name="ProgressStack"
  initialParams={{route_index: 0}}
  options={{
    headerShown: false,
  }}/>

在组件中，您需要接受

{navigation}

属性，之后您需要对按钮组件进行布局，单击该组件后，您将返回到所需的屏幕

navigation.navigate('SCREEN')

或

navigation.back()

YOURSCREE.jsx 中的示例

export default function YOUCOMPONENT ({navigation}) {
return(
    <SafeAreaView style={{
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
    }}>
        <TouchableOpacity onPress={() => navigation.navigate('YOUR DESIRED SCREEN TO BACK')}>
            {/*Your svg or image of Arrow */}
        </TouchableOpacity>
        <View>
            <Text style={{fontFamily: 'mt-bold', fontSize: 18,}}>YOUR SCREEN TEXT</Text>
        </View>
    </SafeAreaView>
   );
}

Answer 2

您必须在 Tab.Navigator 的 init 中设置 backBehavior。

<Tab.Navigator backBehavior={'history'}>
      <Tab.Screen name={'FeedStack'} component={FeedStack} />
      <Tab.Screen name={'TasksStack'} component={TasksStack} />
      <Tab.Screen name={'ChatsStack'} component={ChatStack} />
      <Tab.Screen name={'ServicesStack'} component={ServicesStack} />
      <Tab.Screen name={'MyTeamStack'} component={MyTeamStack} />
    </Tab.Navigator>

查看文档以了解适合您案例的其他选项： https://reactnavigation.org/docs/bottom-tab-navigator/#backbehavior