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

y4ekin9u 于 2022-12-04 发布在 React

关注(0)|答案(1)|浏览(144)

我有4个导航堆栈菜单， Jmeter 板，进度和通知。

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

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

react-native

来源：https://stackoverflow.com/questions/74651438/how-to-navigate-back-to-previous-screen-in-another-tab-in-react-native

1条答案

按热度按时间

f0brbegy1#

写入标头显示：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>
   );
}

赞(0）回复(0）举报 2022-12-04

我来回答

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

1条答案

相关问题

热门标签

最新问答